Geolocation APIs

June 28, 2017


Introduction to the geolocation API

The Geolocation API

Click the button to get your coordinates:

1
2
3
4
5
6
7
8
9
10
11
12
var displayCoords = document.querySelector("#msg");
function getLocation() {
  if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(showPosition);
  } else {
          displayCoords.innerHTML="Geolocation API not supported by your browser.";
  }
};
function showPosition(position) {
   displayCoords.innerHTML="Latitude: " + position.coords.latitude +
        "<br />Longitude: " + position.coords.longitude;
}

Practical examples using the Google Map API

This section presents some examples of how to get a static map (a picture), using the Google Static Map API, how to display an interactive map using the Google Map JavaScript API and even how to get an estimation of a physical address from the longitude and latitude, using the Google Reverse Geocoding JavaScript API.

The following three examples increase in complexity, but most of the code is reused and adapted without even reading the Google documentation about the different APIs.

Example 1 (easy): how to get a static image map centered on your longitude and latitude

Click the button to get your coordinates:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
function getLocation1(){
    /* Default position*/
    var centerpos = new google.maps.LatLng(48.579400,7.7519);
    /* default options for the google map*/
    var optionsGmaps = {
        center:centerpos,
        navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15
    };
    /* Init map object*/
    var map = new google.maps.Map(document.querySelector("&lt;div id="">&lt;/div>map"), optionsGmaps);
    if(navigator.geolocation) {
        /* callback function, called by getCurrentPosition() in case of success*/
        function drawPosition(position) {
            var infopos = "Got position : &lt;br>";
            infopos += "Latitude : "+position.coords.latitude +"&lt;br>";
            infopos += "Longitude: "+position.coords.longitude+"&lt;br>";
            infopos += "Altitude : "+position.coords.altitude +"&lt;br>";
            document.querySelector("#myposition").innerHTML = infopos;
            /* Make new object LatLng for Google Maps*/
            var latlng = new google.maps.LatLng(position.coords.latitude,
                                            position.coords.longitude);
            /* Add a marker at position*/
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title:"You are here"
            });
            /* center map on longitude and latitude*/
            map.panTo(latlng);
        }
        /* callback function, called by getCurrentPosition() in case of error*/
        function errorPosition(error) {
              continue;
        }
        navigator.geolocation.getCurrentPosition(drawPosition,errorPosition);
    } else {
        alert("Geolocation API not supported by your browser");
    }   
}