 Capt. Horatio T.P. Webb | Markers Spring 2015 Last Updated 12PM 1/6/2015 | |
Capt. Horatio T.P. Webb | Markers Spring 2015 Last Updated 12PM 1/6/2015 | |
Once we have the basic Google map on a web page (as shown in Part I), we can a custom markers, and a tooltip (text).
To visually identify a specific locations on a Google map, we can add markers. The general format of a marker is:
var marker = new google.maps.Marker({
position: Latitude_and_Longitude_Specification,
map: map,
title:"some_text"
});
The Latitude_and_Longitude_Specification is normally done by creating a Google maps .LatLng like this:
var latitute_longitude_name = new google.maps.LatLng( latitude value , longitude value);
where the latitude and longitude are either in DD, DMM or DMS format. The "title" option represents the text to be displayed when we mouse over the icon (this is called a "tooltip")
We can customize the marker color and the single letter that appears on the marker (see zedia.net's page here) using this:
http://www.googlemapsmarkers.com/v1/text/hexadecimal_color_value/
For a red marker (the hexadecimal color value is: ff0000) with an "X" we would use:
the link: http://www.googlemapsmarkers.com/v1/X/ff0000/ that returns this icon:
We get this marker on our map by using the "icon" option of the google maps marker. First we create an image like this:
var image= {
url: 'http://www.googlemapsmarkers.com/v1/X/ff0000/'
}
Now we add the image information, the text (i.e., "title") and position to the marker specification like this:
var meeting_location=new google.maps.LatLng(29.721760, -95.339799);
var marker = new google.maps.Marker({
position: meeting_location,
map: map,
icon: image,
title:"Meeting Today at 6PM in Cemo Hall Auditorium"
});
Now lets build the map and and place the marker: