{"id":48763,"date":"2017-07-06T11:17:56","date_gmt":"2017-07-06T05:47:56","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=48763"},"modified":"2017-07-06T11:17:56","modified_gmt":"2017-07-06T05:47:56","slug":"integration-of-google-map-apis","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/integration-of-google-map-apis\/","title":{"rendered":"Integration of Google Map APIs"},"content":{"rendered":"

Software engineers and organisations lookout for effective ways to create new applications that save time and money. We can easily do this by using third-party APIs and SDKs.<\/p>\n

This blog talks about a useful Google Map API. I am working on a project\u00a0based on Routing and live tracking of a driver’s vehicle.<\/p>\n

Consider a scenario where a driver can pick up multiple passengers from different locations, where we need to put markers on every pickup. A route needs to be created between two locations. Google Maps API allows you to display maps, draw routes and create Markers on your website.<\/p>\n

Following are the steps to\u00a0use Google Map APIs:<\/p>\n

Step1:<\/strong> \u00a0Add script to your HTML page.<\/p>\n

<script src=\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=[YOUR_API_KEY]&libraries=places\"><\/script<\/pre>\n
Step2:<\/strong>\u00a0Get your API key. Click the Get A Key button from here<\/a>. It will tell you how to register projects in the Google API Console. It can also activate the\u00a0Directions API automatically to generate a generic and unrestricted API key.<\/p>\n
Step3:\u00a0<\/strong>Now we can use multiple Google API’s in our controller to fulfil our requirements:<\/p>\n
    \n
  1. Draw a route between two locations either by location name or location lat-long:\n
    [js]
    \nvar directionsDisplay;
    \nvar directionsService = new google.maps.DirectionsService();
    \nvar map;
    \nvar mapCenter = new google.maps.LatLng(28.535891, 77.345700);
    \nvar myOptions =
    \n    {
    \n        zoom: 12,
    \n        mapTypeId: google.maps.MapTypeId.ROADMAP,
    \n        center: mapCenter
    \n    };
    \nmap = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    \n\/\/There should be a div with id ‘map_canvas’ in your html.
    \n\/\/It can be done in angular directive if you are using angular<\/p>\n
    var request = {.
    \n   origin: ‘Sector 127, Noida’,
    \n   destination: ‘Sector 18, Noida’,
    \n   travelMode: ‘DRIVING’
    \n} <\/p>\n
           OR<\/p>\n
    var request = {
    \n   origin: new google.maps.LatLng(28.535891, 77.345700),
    \n   destination: new google.maps.LatLng(28.570317, 77.321820),
    \n   travelMode: ‘DRIVING’
    \n}<\/p>\n
    directionsService.route(request, function(response, status) {
    \n      if (status === ‘OK’) {
    \n          directionsDisplay = new google.maps.DirectionsRenderer();
    \n          directionsDisplay.setMap(map);
    \n          directionsDisplay.setDirections(response);
    \n          \/\/ For each route, display summary information.
    \n      } else {
    \n          console.log(‘Directions request failed due to ‘ + status, response);
    \n      }
    \n});<\/p>\n
    [\/js]<\/p>\n
     <\/p>\n
    \"Route1\"<\/p>\n
    In the above image, the polyline is the default polyline\u00a0of directionService to draw the route.<\/li>\n
  2. We can also change polyline configurations like colour and line style by specifying polylineOptions while creating the directionsDisplay object. See the code below:\n
    [js]
    \n\/\/ we can specify even small dot-dot and any other kind of polyline according to requirement
    \nvar lineSymbol = {
    \n    path: ‘M 0,-1 0,1’,
    \n    strokeOpacity: 1,
    \n    scale: 4
    \n};<\/p>\n
    var polylineOptionsActual = {
    \n    strokeColor: ‘#FB802E’,
    \n    strokeOpacity:0,
    \n    strokeWeight: 0,
    \n    icons: [{
    \n        icon: lineSymbol,
    \n        offset: ‘0’,
    \n        repeat: ’20px’
    \n    }]
    \n};
    \n\/\/specify polylineOption in DirectionRenderer constructor
    \ndirectionsDisplay = new google.maps.DirectionsRenderer({polylineOptions: polylineOptionsActual});<\/p>\n
    [\/js]<\/p>\n
    \"dotted_route\"<\/p>\n
    In this image, Google detects the smallest route between location A and B by default. However, if we want to find a route covering some specific locations like that in the “Travelling Salesman Problem”\u00a0<\/strong>then, we can define waypoints array<\/strong> for those places while drawing the route.<\/li>\n
  3. Creating Waypoints while Drawing Route:\n
    [js]
    \nfunction drawRouteByWaypoints() {
    \n            \/\/covering Location Array<\/p>\n
          var otherLocations = [
    \n      \t\t{latitude: 28.535618, longitude: 77.348914},
    \n      \t\t{latitude: 28.555861, longitude: 77.329794},
    \n      \t\t{latitude: 28.561299, longitude: 77.336473}
    \n      ];
    \n      var wayPoints = [];
    \n      angular.forEach(otherLocations, function (waypoint) {
    \n          wayPoints.push({
    \n              location: new google.maps.LatLng(waypoint.latitude, waypoint.longitude),
    \n              stopover: true
    \n      \t  });
    \n      });
    \n      var request = {
    \n          origin: ‘Sector 127, Noida’,
    \n          destination: ‘Sector 18, Noida’,
    \n          waypoints: wayPoints,
    \n          optimizeWaypoints: true,
    \n          travelMode: ‘DRIVING’
    \n      };
    \n      directionsService.route(request, function(response, status) {
    \n          if (status === ‘OK’) {
    \n              directionsDisplay = new google.maps.DirectionsRenderer();
    \n              directionsDisplay.setMap(map);
    \n              directionsDisplay.setDirections(response);
    \n              \/\/ For each route, display summary information.
    \n          } else {
    \n          \t  console.log(‘Directions request failed due to ‘ + status, response);
    \n          }
    \n      });
    \n}
    \n[\/js]<\/p>\n
    \"Waypoint_route\"<\/p>\n
    In the image above, B, C and D are the locations that we need to cover between Location A (Sector 127, Noida) and Location B (Sector 18, Noida).<\/p>\n
    We can also avoid displaying B, C, and D markers for waypoints by passing {suppressMarkers: true}<\/strong> in the DirectionRenderer constructor while creating a directionsDisplay object as given below:<\/p>\n
    [js]
    \n directionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true});
    \n [\/js]<\/p>\n<\/li>\n
  4. Creating Markers on the map: Here we will discuss different types of markers that we can create by using Google APIs:
    \na. Default Google Marker<\/strong><\/p>\n
    [js]<\/p>\n
        var marker = new google.maps.Marker({
    \n        map: map,
    \n        position: {lat: 28.533938, lng: 77.348235}
    \n    });<\/p>\n
        [\/js]<\/p>\n
    \u00a0b. Marker with Label<\/strong><\/p>\n
    [js]<\/p>\n
        var marker = new google.maps.Marker({
    \n        map: map,
    \n        label: ‘1’,
    \n        position: {lat: 28.543792, lng: 77.331007}
    \n    });<\/p>\n
        [\/js]<\/p>\n
    c.<\/strong> Marker with Custom colour<\/strong><\/p>\n
    [js]<\/p>\n
        var marker = new google.maps.Marker({
    \n          map: map,
    \n          position: {lat: 28.570317, lng: 77.321820},
    \n          icon: pinSymbol("#FFF")
    \n    });<\/p>\n
        function pinSymbol(color) {
    \n        return {
    \n            path: ‘M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z’,
    \n            fillColor: color,
    \n            fillOpacity: 1,
    \n            strokeColor: ‘#000’,
    \n            strokeWeight: 2,
    \n            scale: 1,
    \n        };
    \n    }<\/p>\n
        [\/js]<\/p>\n
    d. Marker with Custom Image<\/strong><\/p>\n
    [js]<\/p>\n
        var marker = new google.maps.Marker({
    \n        map: map,
    \n        position: {lat: 28.573405, lng: 77.371203},
    \n        icon: ‘https:\/\/developers.google.com\/maps\/documentation\/javascript\/examples\/full\/images\/beachflag.png’
    \n    });<\/p>\n
        [\/js]<\/p>\n<\/li>\n<\/ol>\n
    \"Markers1\"<\/p>\n
    As we can see, all the markers are those which we created by using Google API. Nevertheless, we can create markers with a different look and feel by using some external JS.<\/p>\n
    1. markerwithlabel.js:<\/strong> We can create marker of any colour with any label.<\/p>\n
    [js]<\/p>\n
    var marker = new MarkerWithLabel({
    \n      position: {lat: 28.529377, lng: 77.391295},
    \n      map: map,
    \n      labelContent: 1,
    \n      labelAnchor: new google.maps.Point(7, 35),
    \n      labelClass: "labels", \/\/ the CSS class for the label
    \n      labelInBackground: false,
    \n      icon: pinSymbol(‘red’)\/\/it is function that is given in above code
    \n});<\/p>\n
    \/\/the CSS class for label
    \n.labels {
    \n      color: white;
    \n      background-color: transparent;
    \n      font-size: 12px;
    \n      text-align: center;
    \n      width: 15px;
    \n      white-space: nowrap;
    \n      font-weight: 600;
    \n      top: 121px;
    \n}
    \n[\/js]<\/p>\n
    \"MarkerWithLabel\"<\/p>\n
    Click\u00a0here<\/a> to explore more about it.<\/p>\n
    2. map-icons.js:<\/strong> By using Map Icons, we can change\u00a0Google Maps Marker<\/strong>\u00a0according to our requirements and we can have control over the shape,\u00a0color, and size of Marker. We can\u00a0also extend Google Map Marker<\/strong> object by placing an icon on top of Marker as a label.<\/p>\n
    Include the following things from here<\/a> to create markers with icons:
    \na. fonts given in dist\/font
    \nb. dist\/css\/map-icons.css
    \nc. dist\/js\/map-icons.js<\/p>\n
    Icon Classes: icon Class names are to be used with the map-icon<\/strong> class prefix.<\/p>\n
    [js]
    \n<span class="map-icon map-icon-point-of-interest"><\/span><\/p>\n
    [\/js]<\/p>\n
    You should be creating an instance of Marker<\/strong> rather than google.maps.Marker<\/strong>.<\/p>\n
    [js]<\/p>\n
    var marker = new Marker({
    \n    position: {lat: 28.533938, lng: 77.348235},
    \n    map: map,
    \n    icon: {
    \n        path: ‘M 0,0 C -2,-20 -10,-22 -10,-30 A 10,10 0 1,1 10,-30 C 10,-22 2,-20 0,0 z’,
    \n        fillColor: ‘#0000FF’,
    \n        fillOpacity: 1,
    \n        strokeColor: ”,
    \n        strokeWeight: 0
    \n    },
    \n    map_icon_label: "<span class=’map-icon map-icon-bus-station’><\/span>"
    \n});
    \n[\/js]<\/p>\n
    Explicit styles to icons used on a Google marker should be applied with .map-icon-label .map-icon CSS selector.<\/p>\n
    [js]
    \n.map-icon-label .map-icon {
    \n    display: block;
    \n    font-size: 12px;
    \n    color: white;
    \n    width: 49px;
    \n    line-height: 39px;
    \n    text-align: center;
    \n    white-space: nowrap;
    \n}
    \n[\/js]<\/p>\n
    \"MarkerWithMapIcon\"<\/p>\n
    To explore Google Map API, please visit here<\/a>.<\/p>\n
    You can also visit code on GitHub repo<\/a><\/p>\n
    In this way, you can easily create routes and markers on Map with just a few steps. Hope this blog was helpful to you.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Software engineers and organisations lookout for effective ways to create new applications that save time and money. We can easily do this by using third-party APIs and SDKs. This blog talks about a useful Google Map API. I am working on a project\u00a0based on Routing and live tracking of a driver’s vehicle. Consider a scenario […]<\/p>\n","protected":false},"author":810,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":8},"categories":[1439,1994,1],"tags":[4849,323,245,398,4611,55,3626,4620,1418,1610,4642],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/48763"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/810"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=48763"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/48763\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=48763"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=48763"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=48763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}