Chris Smith Chris Smith - 1 year ago 91
Javascript Question

Google Api map with directions using javascript

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 =;
var longitude = document.frmOne.longi.value;
var number = document.frmOne.number.value;
var addressone = document.frmOne.addressone.value;
var city =;
var countie = document.frmOne.countie.value;
var postcode = document.frmOne.postcode.value;
var latlng = new google.maps.LatLng(latitude,longitude);
var options ={


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

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, marker);

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


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.

Answer Source

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
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download