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.
No comments:
Post a Comment