I’m using directions for Google Maps V3 API. However I get the javscript error when i run it:
Uncaught ReferenceError: request is not defined
This is my JS code:
<script type="text/javascript">
var directionDisplay; //NEW CODE
var directionsService = new google.maps.DirectionsService(); //NEW CODE
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer(); //NEW CODE
var latlng = new google.maps.LatLng(1.288693,103.846733);
var options = {
zoom: 16,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
scrollwheel: true
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
directionsDisplay.setMap(map);
marker1 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
marker2 = new google.maps.Marker({
position: new google.maps.LatLng(1.288693,103.846733),
map: map
});
google.maps.event.addListener(marker1, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
});
google.maps.event.addListener(marker1, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
});
google.maps.event.addListener(marker1, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
google.maps.event.addListener(marker2, "mouseover", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
});
google.maps.event.addListener(marker2, "mouseout", function(event) {
this.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
});
google.maps.event.addListener(marker2, "click", function(event) {
window.location = "http://localhost/yupsg/places/display/111";
});
var LatLngList = [
new google.maps.LatLng(1.288693,103.846733),
new google.maps.LatLng(1.288693,103.846733)
];
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|c41200|ffffff");
}
function changeMarkerOnmouseover(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|ffffff|c41200");
}
function changeMarkerOnmouseout(marker) {
marker.setIcon("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|c41200|ffffff");
}
//NEW CODE FOR NEW FUNCTION
function calcRoute() {
var start = "35 Oxford Street, Cambridge, MA 02138";
var end = "24 Oxford Street, Cambridge, MA 02138";
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);
}
});
</script></head>
You are defining
requestinside the scope ofcalcRoute()but then trying to use it outside immedately afterwards outside ofcalcRoute(). Define it in the same scope where you will use it.It appears that there might be a few other errors in there too. Here’s the end result of my trying to make minimal edits to get your code to work. Hope it helps!