Posted By

bcalloway on 11/11/08


Tagged

javascript xhtml google


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

joaosalless
carlosabargues


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.

  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  

You need to login to post a comment.