Information Technology Reference
In-Depth Information
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapContainer"),
myOptions);
var marker = new google.maps.Marker({
position: myLatlong,
map: map,
title:"Hello World!"
});
}
function initialize() {
if (supportsGeo()) {
myLatitude = "";
myLongitude = "";
navigator.geolocation.getCurrentPosition(
function(position) {
myLatitude = position.coords.latitude;
myLongitude = position.coords.longitude;
},
function(error) {
switch(error.code) {
case error.TIMEOUT:
alert ('Geolocation returned a timeout error');
break;
case error.POSITION_UNAVAILABLE:
alert ('Geolocation returned a position unavailable
error');
break;
case error.PERMISSION_DENIED:
alert ('Geolocation returned permission denied (did
you deny access?)');
break;
case error.UNKNOWN_ERROR:
alert ('Geolocation encountered an unknown error');
break;
}
}
);
alert("Confirm geolocation access before clicking OK");
}
mapMe(myLatitude, myLongitude);
}
</script>
</head>
<body>
<h1>
<body onload="initialize()">
<div id="mapContainer" style="width:100%; height:100%">
<!-- Your map goes here! -->
</div>
</body>
</html>
You'll note that our code starts with some CSS, and ends with very simple HTML that
invokes our new
initialize()
method as soon as the page loads. The CSS is
