HTML and CSS Reference
In-Depth Information
var mapOptions = {
zoom: 18,
center: latlng,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var div = $("<div>").css({ width: "100%",
height:"100%",
position:"absolute"})
.appendTo("body")[0];
map = new google.maps.Map(div, mapOptions);
marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Me"
});
}
function updateMap(pos) {
var latlng = new google.maps.LatLng(pos.coords.latitude,
pos.coords.longitude);
if(!map) {
createMap(latlng);
} else {
marker.setPosition(latlng);
}
}
function positionError(error) {
alert("Error tracking your position");
navigator.geolocation.clearWatch(watchID);
}
var watchID = navigator.geolocation.watchPosition(
updateMap,positionError,{
enableHighAccuracy: true
});
});
</script>
</body>
</html>
The event loop starts by calling
watchPosition
to trigger a call to
updateMap
every time the position
changes.
updateMap
creates a new
LatLng
object and then determines if the map has been drawn before.
If not it calls
createMap
to generate the initial map. If the map has already been drawn, it calls the marker's
setPosition
command to update the marker to the new position.
