CODEWITHSUNDEEP
javascriptgeolocationelevation
mushroomgroover
mushroomgroover

Reputation: 201

How to combine Geolocation and Elevation in Google Maps

I'm having hard time to combine the geolocation and elevation in Google Maps. I need to present the elevation of the current location. It seems that the values in pos variable is not equivalent to the event.latLng.

Google Maps Elevation

Here is my code trying to combine the geolocation and elevation

function initMap() {


var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    // disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 20
  });
  var elevator = new google.maps.ElevationService;
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      displayLocationElevation(pos, elevator, infowindow);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

function displayLocationElevation(location, elevator, infowindow) {
  map.setCenter(location);
  Initiate the location request
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infowindow.setPosition(location);
    if (status === google.maps.ElevationStatus.OK) {
      // Retrieve the first result
      if (results[0]) {
        // Open the infowindow indicating the elevation at the clicked position.
        infowindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters.');
      } else {
        infowindow.setContent('No results found');
      }
    } else {
      infowindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

UPDATE: it seems that pos variable and event.latLng has different values. pos produces [Object object] while event.latLng produces (lat value, long value). Though using pos.lat produces the latitude then same as pos.long for longitude. Still trying to figure this out...

Upvotes: 1

Views: 455

Answers (1)

mushroomgroover
mushroomgroover

Reputation: 201

Okay I got it! Here's the code:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    // disableDefaultUI: true,
    mapTypeId: google.maps.MapTypeId.SATELLITE,
    zoom: 20
  });
  var elevator = new google.maps.ElevationService;
  var infoWindow = new google.maps.InfoWindow({map: map});

  // Try HTML5 geolocation.
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      map.setCenter(pos);
      displayLocationElevation(map.getCenter(), elevator, infoWindow);
    }, function() {
      handleLocationError(true, infoWindow, map.getCenter());
    });
  } else {
    // Browser doesn't support Geolocation
    handleLocationError(false, infoWindow, map.getCenter());
  }
}

function handleLocationError(browserHasGeolocation, infoWindow, pos) {
  infoWindow.setPosition(pos);
  infoWindow.setContent(browserHasGeolocation ?
                        'Error: The Geolocation service failed.' :
                        'Error: Your browser doesn\'t support geolocation.');
}

function displayLocationElevation(location, elevator, infoWindow) {
  elevator.getElevationForLocations({
    'locations': [location]
  }, function(results, status) {
    infoWindow.setPosition(location);
    if (status === google.maps.ElevationStatus.OK) {
      if (results[0]) {
        infoWindow.setContent('The elevation at this point <br>is ' +
            results[0].elevation + ' meters in ' + location);
      } else {
        infoWindow.setContent('No results found');
      }
    } else {
      infoWindow.setContent('Elevation service failed due to: ' + status);
    }
  });
}

Hope it helps to others! :)

Upvotes: 1

Related Questions