Here is another simple tutorial inside the JavaScript world. As explained in my post about Require.js, every website today is being a web app with interactive functionalities. One of the most common feature saw today on the web is Geolocation, technology to discover your position and give you informations about what's happening near you.

Another common scenario is the full integration of HTML5 Geolocation API with Google Maps API, because we all know that the service offered by BigG is the best map service ever. (Aaaaand noooooooo...I am not coff coff _{oh yes I am}coff coff a Google Fan).

In this post I want to do a simple tutorial about integration of Geolocation API with Google Maps to create a simple app that ask your position and give you a map of it on the BigG service. Check out the demo (wait some seconds and accept the GEO pop-up) and let's start!

Basic of HTML5 Geolocation API

The first important thing is the browser support: all commons and updated web browsers out of here support GEO API, but I you check on Chrome browser, be sure your application is running with HTTPS protocol enabled.

Second thing: Geolocation is not enabled by default on our browsers and we have to ask user to give us permission for get his location. To achieve this we have to do a simple if statement to check if browser support Geolocation API, than ask user for his position:

function askGeolocation(){  
    // check if browser support geolocation
    if (navigator.geolocation) {
        // ask permission and take positions    
        navigator.geolocation.getCurrentPosition(setLatLong);
    } else { 
        alert("Geolocation is not supported by your browser.");
    }
};

After this simple task, we can pass an handler to getCurrentPosition() to save the user position in some variables:

function setLatLong(position){  
    alert('Thanks for accepting geolocation! :)');

    // save position
    _userLat = position.coords.latitude;
    _userLng = position.coords.longitude;

    // we will check this function later
    centerMap(_userLat, _userLng);    
};

That's all the work we have to do to take coordinates position of our user. Soooooo simple.

Google Maps integration

Now, we have the position of our user and we want to give him a snap on Google Maps of it. First of all, we have to create a simple and basic Google Maps. To do this we have to integrate in our webpage Google Maps API, so let's add a simple script inside our DOM or inside the place where we declare .js resources for our project:

As you can see I'm using the 3.20 version with a specific API key. If you want to get an API key for Google Maps click here.

After that, let's create a simple map that will be printed inside out

function generateMap(){  
    // create a GMaps object inside a div with #map
    _map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 40.674, lng: -73.946}
    });
};

Finally, write a simple function to center our map on a given set of coordinates, we will call this function when the user will have accepted Geolocation and given us his position:

function centerMap(lat, lng){  
    _map.setCenter(new google.maps.LatLng(lat, lng));
};

General init

We have all the tools to play our exercise. We can start the project with an init function:

function init(){  
    // generate simple map
    generateMap();
    // after 5 seconds ask geolocation and position the map
    setTimeout(function(){
        askGeolocation();
    }, 5000);
};

init();  

Aaaaand, that's all for our tutorial. What can you do now? What about adding a marker? What about using Google Place API to give user informations about interesting places near him? What about calculate a travel or create a simple GPS application?

As you can see you can create a lot of nice things with HTML5 Geolocation API, you only need the right idea, be motivated and start your project!

Hope you have enjoyed this tut, for sure more will comes. For any question or integration drop a comment below. Cheeeeeeeers!