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 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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s