Custom Google Maps Icons

The ability to use custom Google Maps icons (the graphics that mark locations on a Google Map) has been around for a long time, but a feature that is rarely used.

You can use a custom icon to great affect, making your map ‘look and feel’ more like your brand. I’ve thrown together a quick example showing a custom icon on a Google Map.

After you’ve created your custom icon, it is relatively simply to define the custom icon:

// create the custom icon
var customIcon = new GIcon(G_DEFAULT_ICON);
customIcon.image = "wsimages/marker.png";
customIcon.iconSize = new GSize(109, 28);
customIcon.iconAnchor = new GPoint(30, 27);

and then use the custom icon:

var marker = new GMarker(point, {icon:customIcon});
map.addOverlay(marker);

Go and check it out, or download the example directly.

Advertisement

Filed under: google maps, technology, web 2.0