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

  1. I love your blog.. very nice colors & theme. Did you make
    this website yourself or did you hire someone
    to do it for you? Plz respond as I’m looking to create my own blog and would like
    to know where u got this from. thanks

    Like

Leave a comment