-1

Really need some ideas on this. Been working on Google map API, which I'm using Geocoding, Reverse Geocoding and Geolocation. With this piece of code, below,I am able to use Direction API of Google map, which works perfectly.

    var locations = [
        {lat: 6.4261139, lng: 3.4363691}
    ];

    var mapContainer = $('.map-container'),
        map          = new google.maps.Map(mapContainer[0], {
            center: center,
            zoom  : 10
        });

    var markers = _(locations)
        .map(function (loc) {
            return new google.maps.Marker({
                position: new google.maps.LatLng(loc.lat, loc.lng)
            });
        })
        .each(function (marker) {
            marker.setMap(map);
        })
        .value();

    var mc = new MarkerClusterer(map, markers);

    var directionsService = new google.maps.DirectionsService(),
        directionsDisplay = new google.maps.DirectionsRenderer(),
        displayRoute      = function () {
            directionsService.route({
                origin: 'Akin Ogunlewe street VI',//6.512596400000001+','+3.3541297 Pass this in place of the address
                destination: 'Falolu road Surulere',//'Falolu road Surulere',//6.4261139+','+3.4363691 Pass this in place of the address
                travelMode : google.maps.TravelMode.DRIVING
            }, function (response, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(response);
                } else {
                    console.log('Directions request failed due to ' + status);
                }
            });
        };

directionsDisplay.setMap(map);
displayRoute();

Is there a way I can pass Latitude and Longitude in Origin and Destination Instead of physical address (string)? I tried it but did not work.

I need to pass the numeric (float) value like:6.512596400000001,3.3541297 Instead of Falolu road Surulere

Any help is appreciated thanks

Michel
  • 1,065
  • 1
  • 10
  • 25
  • Waoh! Really don't know what's the down vote for. You'd rather ignore or comment than a down vote. :) – Michel Jan 25 '16 at 14:41

1 Answers1

2

The documentation for the v3 API says a google.maps.LatLng or a string. For geographic locations, create and pass in a google.maps.LatLng; for addresses, pass in a string.

origin: LatLng | String | google.maps.Place, destination: LatLng | String | google.maps.Place,

And in the reference

destination | Type: Place | Location of destination. This can be specified as either a string to be geocoded, or a LatLng, or a Place. Required.

origin | Place | Location of origin. This can be specified as either a string to be geocoded, or a LatLng, or a Place. Required.

proof of concept fiddle

code snippet:

var map;

function initialize() {
  var locations = [{
    lat: 6.4261139,
    lng: 3.4363691
  }];

  var mapContainer = $('.map-container'),
    map = new google.maps.Map(mapContainer[0], {
      center: locations[0],
      zoom: 10
    });

  var directionsService = new google.maps.DirectionsService(),
    directionsDisplay = new google.maps.DirectionsRenderer(),
    displayRoute = function() {
      directionsService.route({
        origin: new google.maps.LatLng(6.512596400000001, 3.3541297), // Pass this in place of the address 'Akin Ogunlewe street VI'
        destination: new google.maps.LatLng(6.4261139, 3.4363691), // Pass this in place of the address 'Falolu road Surulere'
        travelMode: google.maps.TravelMode.DRIVING
      }, function(response, status) {
        if (status === google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        } else {
          console.log('Directions request failed due to ' + status);
        }
      });
    };

  directionsDisplay.setMap(map);
  displayRoute();
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas" class="map-container"></div>
geocodezip
  • 158,664
  • 13
  • 220
  • 245