Displaying altitude with Google Maps

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.

Share this article on LinkedIn.