Posted By

bcalloway on 11/11/08

Tagged

Versions (?)

Last Edited at 11/11/08 09:27pm

Statistics

Viewed 935 times

Favorited by 1 user(s)

Related snippets

Google Map custom, clickable labeled marker

/ Published in: JavaScript

This is a sample Google Maps API script that shows a base map with city markers, each with a numbered label. The marker is a default, blank red marker with a number label defined by the overlay array. Clicking on a marker takes you to a page defined in the overlay variable.

Highlighted TextExpand

var letteredIcon = new GIcon(baseIcon);
    
    markerOptions = { 
      icon:letteredIcon,
      labelText: index,
      labelClass: "glabel",
      labelOffset: new GSize(-6, -32)
      };
      
    var marker = new LabeledMarker(point, markerOptions);
    
    // Go to town page if icon is clicked
    GEvent.addListener(marker, "click", function() {
	    window.location = city + ".html"
    });
    
return marker;
}

if (GBrowserIsCompatible()) { 
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.600, -82.554), 8);
		map.addControl(new GSmallMapControl());
		map.addControl(new GMapTypeControl());
		//Change this to set base map to terrain
		//map.setMapType(G_PHYSICAL_MAP);
		//map.addMapType(G_PHYSICAL_MAP);
    
    //Markers, label text, and city name for each marker
   // GLatLng defined the point, the label text is overlayed on the marker, and the city name is the pagename to link
   // example: map.addOverlay(createMarker(new GLatLng(lat, lng), label, city-name))
    map.addOverlay(createMarker(new GLatLng(35.5, -82.57),1,'Asheville'))
    map.addOverlay(createMarker(new GLatLng(36.15, -81.89),2,'Banner-Elk'))
    map.addOverlay(createMarker(new GLatLng(35.6, -82.34),3,'Black-Mountain'))
    map.addOverlay(createMarker(new GLatLng(36.13, -81.67),4,'Blowing-Rock'))
}

</script>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.