Google Maps – Icons

This post is for playing with icons in Google Maps. In the previous post, the last example explained how to add markers when we click on the map. We will try to add custom markers and change the properties of different markers before and after creating them.

In the first example, we’ll create a custom marker instead of the default “G_DEFAULT_ICON”.
First we need marker and shadow images to create custom markers. If you are not interested in creating your own custom markers, then check out
http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
for different markers. I downloaded these markers and stored them in a folder called “icons”. Now let us see the addMarker method which adds a custom marker at the place where you click in the map.
function addMarker(overlay, latlng) {
var icon = new GIcon();
icon.image = "icons/blue-pushpin.png";
icon.shadow = "icons/pushpin_shadow.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(59, 32);
icon.iconAnchor = new GPoint(10, 30);
icon.infoWindowAnchor = new GPoint(10, 30);
marker[markerCount] = new GMarker(latlng, icon);
map.addOverlay(marker[markerCount]);
markerCount = markerCount+1;
document.getElementById("message").innerHTML = "Marker added at latitude "+latlng.lat() + " longitude "+latlng.lng() ;
}
If you aren’t sure about the methods used in the above code, check out the Google Maps API. The above code creates a new Icon and passes it when creating a new Marker
To see how the above code code works, check
http://sp2hari.com/gmap/icon1.html

Now let us make this more complicated. ;). How about the user deciding which type of marker should be added before he adds them?
The code is quite long but certainly not complicated. Before we start with the code, check out how it works :).
http://sp2hari.com/gmap/icon2.html
Two global arrays maintain the different custom markers and their corresponding shadows.
var icons = new Array("blue-pushpin.png", "yellow-pushpin.png", "red-pushpin.png", "purple-pushpin.png", "green-pushpin.png", "lightblue-pushpin.png", "pink-pushpin.png", "blue.png", "yellow.png", "red.png", "purple.png", "green.png", "lightblue.png", "pink.png", "blue-dot.png", "yellow-dot.png", "red-dot.png", "purple-dot.png", "green-dot.png", "lightblue-dot.png", "pink-dot.png");
var shadows = new Array("pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png");

Just to make things easier, I’ve written a separate createIcon function, which takes the index and creates an icon accordingly. The snippet of this function is same as that of the previous file, with very few modifications. 🙂
function createIcon(index) {
var ticon = new GIcon();
ticon.image = "icons/"+icons[index];
ticon.shadow = "icons/"+shadows[index];
ticon.iconSize = new GSize(32, 32);
ticon.shadowSize = new GSize(59, 32);
ticon.iconAnchor = new GPoint(10, 30);
ticon.infoWindowAnchor = new GPoint(10, 30);
return ticon;
}

Now “icon” is a global variable and keeps track of what type of icon should be created. The function changeIcon does two jobs. First it updates the preview of the icon to be displayed and changes the value of the icon. addMarker usees this icon variable before creating an icon. So any marker created will have the icon corresponding to the selected one. 🙂
function changeIcon(index) {
document.preview.src = "icons/"+icons[index];
icon = createIcon(index);
}

Cool right ;). Now how about changing the icon of a marker which is already created. There are two ways of doing this. First one is simple, but won’t work if the shadows differ. Second one is a little complicated, but works for all kinds of markers.
Before we start, check out the this link to see how the markers are changed after they are created.
http://sp2hari.com/gmap/icon3.html
In this example, the only addition to the code is
function changeAllMarkers(index) {
for (var i=0; i

The setImage function changes the image of a marker, but doesn't allow us to change the shadow. It's mentioned in the API as follows