Maps are useful for displaying spatial data, and Google provides an API to enable the easy addition of information to a Google map. In this lab exercise, you will learn how to use a few of the elements of the API to map the locations of the seven summits, the highest mountain on each continent.
<!DOCTYPE html /> <html> <head> <title>Google maps Multiple Marker Demo</title> </head>
<body onLoad="initializeMaps()">
<h1>Google Maps Demo</h1>
<div id="map_canvas" style="width:100%; height:400px"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var markers = [
['Mount Everest', 27.99003, 86.929837],
['Aconcagua', -32.65, -70.0]
];
function initializeMaps() {
var myOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < markers.length; i++) {
var pos = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(pos);
marker = new google.maps.Marker({
position: pos,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(markers[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
</script>
</body>
</html> |
|---|
Add data for the locations of all the seven highest summits on each continent.
| Mountain | Continent | Height (meters) | Latitude | Longitude |
| Mount Everest | Asia | 8,850 | 27.99 | 86.93 |
| Aconcagua | South America | 6,959 | -32.65 | -70.00 |
| Mount McKinley (Denali) | North America | 6,194 | 63.10 | -151.01 |
| Kilimanjaro | Africa | 5,895 | -3.07 | 37.35 |
| Mount Elbrus | Europe | 5,642 | 43.36 | 42.44 |
| Vinson Massif | Antarctica | 4,897 | -78.58 | -82.42 |
| Mount Kosciuszko | Australia | 2,228 | -36.45 | 148.27 |
Save the html file as map.html on a server.
Use your browser to open map.html (e.g., richardtwatson.com/map.html).
This page is part of the promotional and support material for Data Management (open edition) by Richard T. Watson |