HTML and CSS Reference
In-Depth Information
</head>
<body>
<h1>Ice Cream in Philadelphia</h1>
<ul>
<li><a data-lat="39.9530255" data-long="-75.1596066"
href="http://www.bassettsicecream.com/">Bassetts Ice Cream</a></li>
<li><a data-lat="39.949888" data-long="-75.161717"
href="http://www.capogirogelato.com/">Capogiro Gelateria</a></li>
<li><a data-lat="39.949556" data-long="-75.1428795"
href="http://www.franklinfountain.com/">Franklin Fountain</a></li>
</ul>
<div id="map"></div>
<script>
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].dataset.lat;
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
});
}
</script>
</body>
</html>
Discussion
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.
