Advanced Search

Google Map custom, clickable labeled marker

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <div id="map"></div>
  2.  
  3. <script type="text/javascript">
  4. 	// Create a base icon
  5.   var baseIcon = new GIcon();
  6.   baseIcon.image = "images/red_marker.png";
  7.   baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  8.   baseIcon.iconSize = new GSize(20, 34);
  9.   baseIcon.shadowSize = new GSize(37, 34);
  10.   baseIcon.iconAnchor = new GPoint(9, 34);
  11.   baseIcon.infoWindowAnchor = new GPoint(9, 2);
  12.   baseIcon.infoShadowAnchor = new GPoint(18, 25);
  13.  
  14.   function createMarker(point, index, city) {  
  15.  
  16.     var letteredIcon = new GIcon(baseIcon);
  17.  
  18.     markerOptions = { 
  19.       icon:letteredIcon,
  20.       labelText: index,
  21.       labelClass: "glabel",
  22.       labelOffset: new GSize(-6, -32)
  23.       };
  24.  
  25.     var marker = new LabeledMarker(point, markerOptions);
  26.  
  27.     // Go to town page if icon is clicked
  28.     GEvent.addListener(marker, "click", function() {
  29. 	    window.location = city + ".html"
  30.     });
  31.  
  32. return marker;
  33. }
  34.  
  35. 	if (GBrowserIsCompatible()) { 
  36.     var map = new GMap2(document.getElementById("map"));
  37.     map.setCenter(new GLatLng(35.600, -82.554), 8);
  38. 		map.addControl(new GSmallMapControl());
  39. 		map.addControl(new GMapTypeControl());
  40. 		//Change this to set base map to terrain
  41. 		//map.setMapType(G_PHYSICAL_MAP);
  42. 		//map.addMapType(G_PHYSICAL_MAP);
  43.  
  44.     //Markers, label text, and city name for each marker
  45.    // GLatLng defined the point, the label text is overlayed on the marker, and the city name is the pagename to link
  46.    // example: map.addOverlay(createMarker(new GLatLng(lat, lng), label, city-name))
  47.     map.addOverlay(createMarker(new GLatLng(35.5, -82.57),1,'Asheville'))
  48.     map.addOverlay(createMarker(new GLatLng(36.15, -81.89),2,'Banner-Elk'))
  49.     map.addOverlay(createMarker(new GLatLng(35.6, -82.34),3,'Black-Mountain'))
  50.     map.addOverlay(createMarker(new GLatLng(36.13, -81.67),4,'Blowing-Rock'))
  51. }    
  52.  
  53. </script>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.