CODEWITHSUNDEEP
javascriptcordovagoogle-mapsgoogle-maps-api-3intel-xdk
J.S.
J.S.

Reputation: 1

Google Maps API Intel XDK Waypoints

For a school project I have to make an app, using Intel XDK, jQuery Mobile and an API. I wanted to make an app in which you can make a route and display this route on a google-maps-map (like a travelapp to view your trips).

I used Intel XDK (HTML5 + Cordova and the App Designer) and got an API key from the Google Maps Javascript API.

Right now, I have used the Google Maps API and displaying a route from A to B went well. In the following code (this is in my script) I tried to add waypoints to my route. In my HTML code I have three text-inputs for the user (start, via (=waypoint), end), the map and a button to show the route. I have looked at many sample codes, but my code doesn't work and I don't know why. There is no error, but if you push the showbutton, nothing happens. What have I done wrong or what did I miss?

I hope anyone can help and thanks in advance!

 var directionDisplay;
 var directionsService = new google.maps.DirectionsService();

function initMap() {
    var latlng = new google.maps.LatLng(41.850033, -87.6500523);
    // set direction render options
    //var rendererOptions = { draggable: true };
    directionsDisplay = new google.maps.DirectionsRenderer({map: map});
    var myOptions = {
        zoom: 14,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        mapTypeControl: false
    };
    // add the map to the map placeholder
    var map = new google.maps.Map(document.getElementById("gmap"),myOptions);
    directionsDisplay.setMap(map);
    calcRoute();
}

 function calcRoute() {
    var start = $('#start-input').val();
    var via = $('#via-input').val();
    var end = $('#end-input').val();
    var waypts = [];

    waypts.push({
        location: via,
        stopover: true
    });

    var request = {
        origin: start,
        destination: end,
        waypoints: waypts,
        optimizeWaypoints: true,
        unitSystem: google.maps.UnitSystem.IMPERIAL,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            alert('Directions request failed due to ' + status); 
        }
    });
}

 function createMarker(latlng) {
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
 }

 /* button  #show-btn */
$(document).on("click", "#show-btn", function(evt) {
    initMap();
    createMarker(start);
    createMarker(via);
    createMarker(end);

    return false;
});

Upvotes: 0

Views: 102

Answers (1)

duncan
duncan

Reputation: 31912

You're creating the variables start, via and end as local variables in your calcRoute function, meaning they're not available to any code outside of that function. So when you try and refer to them in these lines, they'll be undefined, and I suspect you're getting a JS error:

createMarker(start);
createMarker(via);
createMarker(end);

Make them global variables instead; define them at the same time as you do this:

 var directionDisplay;

i.e. that becomes:

 var directionDisplay, start, via, end;

And then remove the var keyword from where you refer to them in the calcRoute function, i.e. do:

 function calcRoute() {
    start = $('#start-input').val();
    via = $('#via-input').val();
    end = $('#end-input').val();

You also have the same problem with your map variable. You create that as a local variable in your initMap function, and then try and refer to it in the createMarker function, which won't have access to it. Make that a global variable too.

Upvotes: 0

Related Questions