Google Maps API

**organizedchaos** · 06-19-2009, 02:12 PM

Anyone tried Google Maps API?

**xXHalfSliceXx** · 06-20-2009, 10:48 PM

I have a little here and there.

Did you have a question other than that?

**organizedchaos** · 06-22-2009, 08:23 AM

Yes! I was hoping someone can teach me how to use it. I supposed I could use this: Visualization: Map - Google Visualization API - Google Code
but I need to be able to control the markers. I want to change the markers into circles and the circles should get bigger or smaller depending on the input (like the # of people). How do I do that?

**BlaineSch** · 06-22-2009, 01:38 PM

I used it for a small project once. You can learn everything you need by examples here:

Google Maps API Examples - Google Maps API - Google Code

**organizedchaos** · 06-23-2009, 07:26 AM

Can you help me with this?

This is the type of code I'd use:

HTML Code:

<html>
  <head>
    <script 
src="http://maps.google.com/maps?file=api&v=2&key=ABCDEFG" type="text/javascript"></script>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["map"]});
      google.setOnLoadCallback(drawMap);
      function drawMap() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Lat');
        data.addColumn('number', 'Lon');
        data.addColumn('string', 'Name');
        data.addRows(4);
        data.setCell(0, 0, 37.4232);
        data.setCell(0, 1, -122.0853);
        data.setCell(0, 2, 'Work');
        data.setCell(1, 0, 37.4289);
        data.setCell(1, 1, -122.1697);
        data.setCell(1, 2, 'University');
        data.setCell(2, 0, 37.6153);
        data.setCell(2, 1, -122.3900);
        data.setCell(2, 2, 'Airport');
        data.setCell(3, 0, 37.4422);
        data.setCell(3, 1, -122.1731);
        data.setCell(3, 2, 'Shopping');

        var map = new google.visualization.Map(document.getElementById('map_div'));
        map.draw(data, {showTip: true});
      }
    </script>
  </head>

  <body>
    <div id="map_div" style="width: 400px; height: 300px"></div>
  </body>
</html>

while this is the code for the custom markers:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Simple Icon</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
            type="text/javascript"></script>
    <script type="text/javascript">

    function initialize() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
        map.setUIToDefault();
        
        // Create our "tiny" marker icon
        var blueIcon = new GIcon(G_DEFAULT_ICON);
        blueIcon.image = "http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png";
		
		// Set up our GMarkerOptions object
		markerOptions = { icon:blueIcon };

        // Add 10 markers to the map at random locations
        var bounds = map.getBounds();
        var southWest = bounds.getSouthWest();
        var northEast = bounds.getNorthEast();
        var lngSpan = northEast.lng() - southWest.lng();
        var latSpan = northEast.lat() - southWest.lat();
        for (var i = 0; i < 10; i++) {
          var latlng = new GLatLng(southWest.lat() + latSpan * Math.random(),
                                  southWest.lng() + lngSpan * Math.random());
          map.addOverlay(new GMarker(latlng, markerOptions));
        }
      }
    }

    </script>
  </head>

  <body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 500px; height: 300px"></div>
  </body>
</html>

I've been trying to combine them together but to no avail. I can't make it work! I just want to replace the marker on the first code with the marker on the second code. Please help!

**BlaineSch** · 06-23-2009, 07:36 AM

You cant replace the red ones with the blue ones unless you go about doing it with actual markers. You can make clickable markers just like in the first ones example.

Map Overlays - Google Maps API - Google Code
Visualization: Table - Google Visualization API - Google Code

**organizedchaos** · 06-23-2009, 07:40 AM

You cant replace the red ones with the blue ones unless you go about doing it with actual markers.

What do you mean by that?

How do I replace it then?

**BlaineSch** · 06-23-2009, 07:43 AM

Go here:

Map Overlays - Google Maps API - Google Code

If you would like help with specific code we can do that. You could also hire me to do this for you.

**organizedchaos** · 06-23-2009, 08:21 AM

I wish I could just do that but I'm not even getting paid for this myself.

Do you know of any site/example that uses more than 1 type of icon for a particular lat and lng? Like for example in every city I want the number of people and the number of animals (lol) so I'd need to use two icons but same lat and lng. Is that possible?

Thread: Google Maps API

LinkBack

Thread Tools

Search Thread

Display

Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Re: Google Maps API

Thread Information

Users Browsing this Thread

Similar Threads

Google Maps API (or alternative)

Fun when the google-maps-car passes by.

Maps

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions