January 2007 - Posts

Google Maps API - Custom Markers (Icons)
It has been a while since I've posted on this blog so I decided that a  post was about due.  This post is for all of those people who have wondered why Google doesn't provide different color markers for their Gmaps API. 

I created a collection of 12 colored markers that you are free to use however you see fit.  They look like this:



Also, I created key icons to go along with those and they look like this:




This isn't anything innovative but it is convenient to have these available if you want to create a Google Map with different color icons (markers).  These custom markers can be implemented easily since they have the same shadow as the default icon.  The code to implement a custom marker can be found on the Gmaps API page but I will provide it here as well.

function createMarker(point,text,color)
{
 // Create a base icon for all of our markers that specifies the 
 // shadow, icon dimensions, etc.

var baseIcon = new GIcon();
baseIcon.shadow="http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
baseIcon.infoShadowAnchor = new GPoint(18, 25);
var icon = new GIcon(baseIcon);

if(color == "GREEN")
icon.image = "http://www.yoursite.com/markerGreen.png";
else
icon.image = "http://www.yoursite.com/marker.png";

var marker = new GMarker(point, icon);
GEvent.addListener(marker, "click", function()
{
    marker.openInfoWindowHtml(text);
});

return marker;
}

function loadmap()
{
  if (GBrowserIsCompatible())
  {
    var map = new GMap2(document.getElementById("map"));
    map.addControl(new GSmallMapControl());
    map.addControl(new GMapTypeControl());
    map.setCenter(new GLatLng(lat, lon), 13);
    var point = new GLatLng(lat,lon);
    map.addOverlay(createMarker(point, "Your Text Here","DEFAULT"));
    var point = new GLatLng(lat,lon);
    map.addOverlay(createMarker(point, "Your Text Here","GREEN"));
  }

}

Posted: Thursday, January 25, 2007 11:27 AM by Google Fact with 1 comment(s)