Google Api map with directions using javascript - Stack Overflow

admin管理员组

文章数量:1327710

  (function(){
window.onload =function(){
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();
    document.getElementById("lat").style.visibility = "hidden";
    document.getElementById("longi").style.visibility = "hidden";
    document.getElementById("number").style.visibility = "hidden";
    document.getElementById("addressone").style.visibility = "hidden";
    document.getElementById("city").style.visibility = "hidden";
    document.getElementById("countie").style.visibility = "hidden";
    document.getElementById("postcode").style.visibility = "hidden";
    var mapDiv = document.getElementById('map');
    var latitude = document.frmOne.lat.value;
    var longitude = document.frmOne.longi.value;
    var number = document.frmOne.number.value;
    var addressone = document.frmOne.addressone.value;
    var city = document.frmOne.city.value;
    var countie = document.frmOne.countie.value;
    var postcode = document.frmOne.postcode.value;
    var latlng = new google.maps.LatLng(latitude,longitude);
    var options ={
        center:latlng,
        zoom:18,
        mapTypeId:google.maps.MapTypeId.ROADMAP

    };

    var map= new google.maps.Map(document.getElementById('map'),options);
     directionsDisplay.setMap(map);

      var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude,longitude),
  map: map,
  title: 'Click me'
   });

    var infowindow = new google.maps.InfoWindow({
  content: number+" "+addressone+"<br>"+city+"<br>"+countie+"<br>"+postcode
   });

    google.maps.event.addListener(marker, 'click', function() {
  // Calling the open method of the infoWindow
  infowindow.open(map, marker);
});


 var start = (latitude,longitude);
 var end = "51.403650,-1.323252";
 var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
  };
    directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
    }
    });



    };
   })();

The longitude and latitude is generated with php and works perfect. The map loads including the marker but the directions do not show.

I can't find a good tutorial on directions so if anyone know of that would also be a help I know my code isn't very tidy but I'm not very good with java script.

  (function(){
window.onload =function(){
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

directionsDisplay = new google.maps.DirectionsRenderer();
    document.getElementById("lat").style.visibility = "hidden";
    document.getElementById("longi").style.visibility = "hidden";
    document.getElementById("number").style.visibility = "hidden";
    document.getElementById("addressone").style.visibility = "hidden";
    document.getElementById("city").style.visibility = "hidden";
    document.getElementById("countie").style.visibility = "hidden";
    document.getElementById("postcode").style.visibility = "hidden";
    var mapDiv = document.getElementById('map');
    var latitude = document.frmOne.lat.value;
    var longitude = document.frmOne.longi.value;
    var number = document.frmOne.number.value;
    var addressone = document.frmOne.addressone.value;
    var city = document.frmOne.city.value;
    var countie = document.frmOne.countie.value;
    var postcode = document.frmOne.postcode.value;
    var latlng = new google.maps.LatLng(latitude,longitude);
    var options ={
        center:latlng,
        zoom:18,
        mapTypeId:google.maps.MapTypeId.ROADMAP

    };

    var map= new google.maps.Map(document.getElementById('map'),options);
     directionsDisplay.setMap(map);

      var marker = new google.maps.Marker({
    position: new google.maps.LatLng(latitude,longitude),
  map: map,
  title: 'Click me'
   });

    var infowindow = new google.maps.InfoWindow({
  content: number+" "+addressone+"<br>"+city+"<br>"+countie+"<br>"+postcode
   });

    google.maps.event.addListener(marker, 'click', function() {
  // Calling the open method of the infoWindow
  infowindow.open(map, marker);
});


 var start = (latitude,longitude);
 var end = "51.403650,-1.323252";
 var request = {
origin:start,
destination:end,
travelMode: google.maps.TravelMode.DRIVING
  };
    directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
    }
    });



    };
   })();

The longitude and latitude is generated with php and works perfect. The map loads including the marker but the directions do not show.

I can't find a good tutorial on directions so if anyone know of that would also be a help I know my code isn't very tidy but I'm not very good with java script.

• javascript
• google-maps
• google-maps-api-3
• directions

Share Improve this question Follow edited Nov 8, 2016 at 11:53 duncan 31.9k1515 gold badges8181 silver badges101101 bronze badges asked Oct 12, 2011 at 14:40 Chris SmithChris Smith 3511 silver badge44 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You've copied the example from their own reference it looks like to me, which is fine. However they're using place names, and you're using latlng coordinates. What you therefore need to do is use actual latlng objects instead of just "51.403650,-1.323252" and (latitude,longitude).

var request = {
  origin:new google.maps.LatLng(latitude,longitude),
  destination:new google.maps.LatLng(51.403650,-1.323252),
  travelMode: google.maps.TravelMode.DRIVING
};

本文标签： Google Api map with directions using javascriptStack Overflow