Adding Markers on Google Maps (with more functionalities)

This tutorial is out of date as of version 3 of Google Maps. Please see this great answer at Stack Overflow for an updated version on how to add markers.

I modified my previous markers example to show off further functionalities:

• To pop up an info window with marker description.
• To handle clicks and create new markers.
• To use markers with custom images.

To pop up an info window with marker description
Google maps handles clicks through event listeners. Thus, to open the info window we use the GEvent object:

GEvent.addListener(marker, 'click',
      function() 
      {
         var htmlString = "<font color=\"#6387A5\" size=\"1\" 
                                 face=\"Verdana, Arial, Helvetica, sans-serif\">"+
                          description+"<br/>" + 
                          "(" + latitude + "," + longitude + ")</font>";
         marker.openInfoWindowHtml(htmlString);
      }
   );

The addListener method takes your marker, event type, and a callback function. The callback function is executed when the event is fired, and it calls marker.openInfoWindowHtml which opens an info window.

We also pass a string with the openInfoWindowHtml method, which will be displayed in the info window.

To handle clicks and create new markers
We also handle clicks on the map with GEvent, but this time we add a listener by passing the map instead of the marker:

GEvent.addListener(map, "click", function(overlay, location) {
         
         if( overlay )
         {
            // clicked on something other than the map
            
         }
         else
         {
            var description = prompt("Please enter marker description", "");
            
            // create a new marker
            if( description != null )
               addMarker(location,description);
         }
         
         
      });

I had an issue that triggered the map event when clicking on an info window. Ideally we should be able to tell where the click came from, and handle the event appropriately. This is possible with the callback function taking two arguments: an overlay, and the coordinates of the click.

The first argument is the overlay that was clicked by the user; for example markers and info windows. Therefore, when the first argument is not an overlay we can safely say that the user clicked on the map.

To use markers with custom images

We use the GIcon object to create markers with custom images. Once we create an instance of GIcon we pass it into the GMarker constructor; displaying the custom image instead of the default marker.

In the example we randomly use one of the three custom markers:

// create new gicon to use with the marker
var customIcon = new GIcon();
   
// put in random image
var pos = Math.floor(Math.random()*3);
var images = new Array("images/marker_green.png",
"images/marker_blue.png",
"images/marker_yellow.png");
customIcon.image = images[pos];
   
customIcon.iconSize = new GSize(20, 34);
customIcon.iconAnchor = new GPoint(10, 34);
customIcon.infoWindowAnchor = new GPoint(10, 0);
   

// create new marker
var marker = new GMarker(location,customIcon);

About these ads