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
marker[i].setImage("icons/"+icons[index]);
}
}
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
Requests the image specified by the url to be set as the foreground image for this marker. Note that neither the print image nor the shadow image are adjusted. Therefore this method is primarily intended to implement highlighting or dimming effects, rather than drastic changes in marker's appearances. (Since 2.75)
Therefore, the above example is quite easy and useful if there is not much difference in the images we are going to display as markers.
If there is a big difference in the images we are going to display, then the only way is to delete the overlay and create a new marker at the same point.
This example shows how that works.
http://sp2hari.com/gmap/icon4.html
In this example, after you create a marker, change the image and click on the marker again. You can see that the image of the marker changes according to the one selected. :)
The main idea is that when the map is clicked, if it is clicked on a marker, overlay is passed. Else latlng is passed. Thus using this we code the addMarker as follows :)
function addMarker(overlay, latlng) {
if (overlay == null) {
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() ;
}
else {
point = overlay.getPoint();
map.removeOverlay(overlay)
icon = createIcon(document.forms[0].selecticon.selectedIndex);
addMarker(null, point);
}
}
