Advanced Search

Return to Snippet

Revision: 9558
at November 11, 2008 21:27 by bcalloway
Initial Code 
<div id="map"></div>

<script type="text/javascript">
	// Create a base icon
  var baseIcon = new GIcon();
  baseIcon.image = "images/red_marker.png";
  baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
  baseIcon.iconSize = new GSize(20, 34);
  baseIcon.shadowSize = new GSize(37, 34);
  baseIcon.iconAnchor = new GPoint(9, 34);
  baseIcon.infoWindowAnchor = new GPoint(9, 2);
  baseIcon.infoShadowAnchor = new GPoint(18, 25);
          
  function createMarker(point, index, city) {  

    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>
Initial URL 

                                

                                                            

                                    

                                        

                                        Initial Description
                                        

                                    

                                    
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.

                                

                                                            

                                    

                                        

                                        Initial Title
                                        

                                    

                                    
Google Map custom, clickable labeled marker

                                

                                                            

                                    

                                        

                                        Initial Tags
                                        

                                    

                                    
javascript, xhtml, google

                                

                                                            

                                    

                                        

                                        Initial Language
                                        

                                    

                                    
JavaScript