I am trying to use Google Direction API. Please help with my code

Question

<body>

<div id="map-canvas" style="width:400px;height:400px"></div>
<div id="map-canvas"></div>
<script>
function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
    directionsService.route({
    origin: pointA,
    destination: pointB,
    travelMode: google.map.TravelMode.Driving
    },
function (response, status) {
if (status == google.maps.DirectionStatus.OK) {
    directionsDisplay.setDirections(response);
    } else {
    window.alert('Directions request failed due to'+status);
    }
    });
}
function initMap() {
var pointA = new google.maps.LatLng(44.960240, -93.124948),
    pointB = new google.maps.LatLng(44.969966, -93.159800),
    myOption = {
        zoom: 10,
        center: pointA,
    },
    map = new google.maps.Map(document.getElementByID('map-canvas'),myOptions),
    directionService = new google.maps.DirectionsService,
    directionDisplay = new google.maps.DirectionsRenderer({map:map
    }),
    markerA = new google.maps.Marker({
    position: pointA,
    title: "point A",
    label: "A",
    map:map
    }),
    markerB = new google.maps.Marker({
    position: pointB,
    title: "point B",
    label: "B",
    map:map
    }),
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);
}
</script>

</body>

Seth Kroger · Answer

1) Your script provides two functions but there is nowhere either are called. The first is called within the second, but there is nothing that executes the second. 2) Your script references the the Google Maps API library but you aren't loading it in.

Welcome to the Treehouse Community

Looking to learn something new?

Online Learning

Online Learning

I am trying to use Google Direction API. Please help with my code

1 Answer

Seth Kroger

Seth Kroger