We will look at displaying additional positional information with Google Maps in this article, such as altitude. First off, we need to add a new object to Google Maps Api v3 - the MarkerWithLabel object. This allows us to add text labels to Google Maps. They are also draggable. I have updated a Plunk below so you can see the end result yourself:
Location in Google Maps with altitude - Plunk
The MarkerWithLabel.js contains the additional javascript code to add the MarkerWithLabel object. We add the marker inside the showPosition method with the following code:
function showPosition(position){
var mapCanvas = document.getElementById("demo");
var myCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var mapOptions = {center: myCenter, zoom: 12};
var map = new google.maps.Map(mapCanvas,mapOptions);
var marker = new google.maps.Marker({
position: myCenter,
animation: google.maps.Animation.BOUNCE
});
marker.setMap(map);
console.log(position.coords);
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var altitudeMarker = new MarkerWithLabel({
position: myCenter,
draggable: true,
raiseOnDrag: true,
icon: image,
map: map,
labelContent: position.coords.altitude.toString(),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75}
});
}
We add the altitude, using the position.coords.altitude object.
A good tip here is to add high accuracy of the GeoLocation.
function getLocation() {
var geo_options = {
enableHighAccuracy: true,
maximumAge : 30000,
timeout : 27000
};
if (navigator.geolocation){
var position = navigator.geolocation.getCurrentPosition(showPosition, null, geo_options);
}
}
Note that the client has got to have a positioning device supporting returning the altitude. Most smartphones today got GPS for example.
As a test - you can change the value displayed to position.coords.accuracy.toString() instead. Accuracy is always return in the Coords object.
