HTML and CSS Reference
In-Depth Information
<h1>Ice Cream in Philadelphia</h1>
<li><a data-lat="39.9530255" data-long="-75.1596066"
href="">Bassetts Ice Cream</a></li>
<li><a data-lat="39.949888" data-long="-75.161717"
href="">Capogiro Gelateria</a></li>
<li><a data-lat="39.949556" data-long="-75.1428795"
href="">Franklin Fountain</a></li>
<div id="map"></div>
var map_options = {
zoom: 15,
center: new google.maps.LatLng(39.95, −75.152),
mapTypeId: google.maps.MapTypeId.HYBRID
var map = new google.maps.Map(document.getElementById("map"), map_options);
var locations = document.getElementsByTagName("a");
for (var i=0; i < locations.length; i++) {
var latitude, longitude;
if (locations[i].dataset) {
latitude = locations[i];
longitude = locations[i].dataset.long;
} else {
latitude = locations[i].getAttribute("data-lat");
longitude = locations[i].getAttribute("data-long");
locations[i][i] = new google.maps.Marker({
position: new google.maps.LatLng(latitude, longitude),
title: locations[i].innerHTML,
map: map
You already know how to define custom data, so the list of anchors containing data-
latitude and data-longitude attributes should be old hat by now.
Creating a Google Map using the Google APIs is very easy—just call the API in the
document head , create an element to house the map in the body, then call a script that
defines your map options and triggers its rendering.
After the script triggers the drawing of the map, it then accesses the latitude-longitude
positions and uses them to render markers on the map.
Search WWH ::

Custom Search