Meteor : How to use the Google Directions API in my meteor application ?

Create a google key for your application

You need  to go to the google developer console and create your application, create a key, don’t forget configure callbacks urls for your site and ative “Google Maps Embed API”.

https://console.developers.google.com/

Screen Shot 2015-05-18 at 10.28.04 AM

Example of implemantation :

Html file

http://pathGoogleMaps

JS file

Template.myTemplate.helpers({
    pathGoogleMaps: function(){
        // I put the latitude and longitude in the session of the page
        var origin ;
        if (Session.get('lat') != null && Session.get('lon') != null) {
            origin= Session.get('lat') + "," +Session.get('lon');
        }

        var path = "";
        if ( origin != undefined && origin != null ) {
            // When have the origen defined 
            var destination = this.location.latitude + "," + this.location.longitude;
            path = "https://www.google.com/maps/embed/v1/directions"
                + "?key=myGoogleKey";
            path+= "&origin=" + origin;
            path+=  "&destination="+ destination;
            path+=  "&avoid=tolls|highways";
        } else {
            // When I don't have the origen and destination
            path = "https://www.google.com/maps/embed/v1/place"
                + "?key=myGoogleKey";
            path+= "&q=" + this.street + "," + this.addressNumber + "," + this.neighborhood + "," + this.city ;
            path+= "&zoom=14&maptype=roadmap";
        }
        return path;
    }
});

Result :

Screen Shot 2015-05-18 at 8.14.14 PM

Google Directions API  :

https://developers.google.com/maps/documentation/directions/

9 Comments

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s