javascript - Invalid value for property <travelMode>: undefined, what? - Stack Overflow

admin管理员组

文章数量:1430297

I've done something (not sure what) to my map and now a function that was running is now throwing the following error:

Invalid value for property <travelMode>: undefined line 16 main.js

The last thing I did was add the line:

directionsDisplay.setPanel(document.getElementById("directions"));

So that I can display direction details in a div. Here's my code for reference:

// This function sets-up and initiates the Google maps interface
function load_map() {

    startLatLng = new google.maps.LatLng(52.485809,-1.888783);
    // create a new Google latLang marker object with co-ords for
    //the start location
    var config = {
        zoom: 5,
        center: startLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // create a JASON object to store map configruation

    map = new google.maps.Map(document.getElementById("map"), config);

    // intilise the map passing the display divs id and the config
    // object


    var startMarker = new google.maps.Marker({
        position: startLatLng,
        map: map
    })
    startMarker.setIcon('/imgs/startMarker.png');

    // create a new marker object for start (passing anonomus JASON
    // config object)
    startMarker.setMap(map);
    // Add the marker to the map
    geocodeAddress("ARM Ltd Rockingham Court 152 Rockingham Street Sheffield Great Britain");
    geocodeAddress("Centrum House 36 Station Road Egham Surrey");
    geocodeAddress("Pipers Way Swindon United Kingdom");
    // call the geocoding function to add markers to the map

}

/*
 * This function loads a marker overlay on to the location provided
 * and calls the addInfoWindow function to add an info window to it
 * @param a location: google location object representing the location at which
 * the marker is to be placed
 * @param a windowText: String variable representing the information to be attached
 * to the window.
 */

function loadMarker(location,windowText,address) {
    var tempMarker = new google.maps.Marker({
        position: location,
        map: map,
        address:address, 
        selected:"false"
    });
    google.maps.event.addListener(tempMarker, 'click',function(){
        selectLocation(tempMarker);
    });
    google.maps.event.addListener(tempMarker, 'dblclick',function(){

        deselectLocation(tempMarker);
    });
    addInfoWindow(windowText,tempMarker,tempMarker.address);
    // add an information window anchored on the marker
    tempMarker.setIcon('/imgs/workofficeMarker.png');
    markersArray.push(tempMarker);
    tempMarker.setMap(map); 
    // add the marker to the map at this location
}



/*
 * A function to geocode the string type address passed into usable
 * lat lng type co-ords
 * @param address: a String representing the address to be geocoded
 */

function geocodeAddress (address) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            loadMarker(results[0].geometry.location,"Info here",address);
            latlngArray.push(results[0].geometry.location);
        } else {
            alert("Geocode was not successful for the following reason: " +" "+  status);
        }
    });
}

/*
 * This function adds an info window to each marker and allows it
 * to be activated on click.
 * @Param infoText: a String representing the data to be included in the
 * info window
 * @Param marker: a Google Marker Object to attach the Text Window to.
 */

function addInfoWindow (infoText,marker) {


    var contentString = '<div id = "windowContent">'+ 
        '<h4> Details</h4>'+'</div>'+
        '<div id ="windowContent">'
        +'</br>'
        +infoText
        + '</br>'
        + '<p><label for="mapsUkSaddr">Your address</label> <form action="" method="get" target="_blank">'
        + '<input type="text" name="saddr" id="mapsUkSaddr" value="" size="20"/>'
        + '<input type="submit" value="Get directions" />'
        +'<input type="hidden" name="daddr" value='  + '\"'+ marker.address +'\"' + '/>'
        +'<input type="hidden" name="hl" value="en" /> </p>'
        + '</form>'
        + '</div>';
    var tempInfoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListener(marker,'rightclick', function() {
        tempInfoWindow.open(map,marker);
    });
}

/*
 * A function to resize the bounds of the map to fit selected locations
 *              
 */

function getSelected () {

    if (markersArray.length == 0) {
        return -1;
    }

    else {
        selectedMarkersAdds = new Array();
        for (var i = 0; i < markersArrayAdds.length; i++) {
            if ( markersArray[i].selected == "true") {
                selectedMarkersAdds.push( markersArray[i].address)
            }
        }
        return  selectedMarkersAdds;
    }
}

function sizeMap() {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0; i < 1; i++) {
        alert(latlngArray[i]);
        var tempLatLng = new google.maps.LatLng(latlngArray[i]);
        alert(tempLatLng);
        bounds.extend(tempLatLng);
    }
      map.fitBounds(bounds);
}

/*
 * This function allow a given location to be selected as a potential
 * vist location. The location is added to the selected array to 
 * allow resizing and changes the icons colour to show selection
 * @param a marker: Google maps Marker object representing the marker to be
 * selected.
 */

function selectLocation (marker) {

    var markerIndex = checkForMarker(marker);
    if (markerIndex == -1) {
        alert ("Marker specified in selection not found");
        return;
    } 
    else {
        markersArray[markerIndex].selected = "true";
        markersArray[markerIndex].setIcon('/imgs/workofficeRedMarker.png'); 
        return;
    }
}


/*
 * Allows the specified marker to be deselected
 * @param marker: a Google Maps marker object representing the marker
 * to be deselected
 */

function deselectLocation (marker) {

    var markerIndex = checkForMarker(marker);

    if (markerIndex == -1) {
        alert ("Marker specified in deselection not found");
        return;
    } 

    else {
        markersArray[markerIndex].selected = "false";
        markersArray[markerIndex].setIcon('/imgs/workofficeMarker.png');
        return;
    }
}

/*
 * This function allows a route to be calculated to each location 
 * selected and displayed: Google maps LatLng object representing the start of the route
 * @param a endLocation: Google maps LatLng object representing the end of the route
 */

function calculateRoot (startLocation,endLocation) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));

    var request = {
        origin:startLocation,
        destination:endLocation,
        provideRouteAlternatives: true
    };   
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);

        }
    });
}

/*
 * This function shows the route from the chosen start location
 * to all of the avaliable placement locations 
 */

function showSpiderView(){
    for (var i = 0; i<latlngArray.length; i++ ) {
        calculateRoot(startLatLng,latlngArray[i]); 
    }
    sizeMap();
}

/*
 * This function allows the selectedLocations array to be checked 
 * to see if a fiven marker has already been selected
 * @param marker: A Google maps marker type object to be searched for
 * @return integer value of array postion if marker is found -1 otherwise 
 */

function checkForMarker (marker) {

    if (markersArray.length !=0){
        for (var i = 0; i < markersArray.length; i++ ) {
            if (marker.address == markersArray[i].address){
                return i
            }
        }
    }
    else {
        return -1;
    }
}

/*
 * Display only placement locations that have been selected by the
 * user
 */

function showOnlySelected () {
    clearMarkers();
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++ ) {
            if (markersArray[i].selected == "true") {
                markersArray[i].setMap(map);
            }
        }
    }

    else {
        alert ("No locations are avaliable to show");
        return;
    }
}
/*
 * A function to allow all placement locations to be displayed
 */
function showAll () {
    clearMarkers();
    if (markersArray != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(map);
        }
    }
    else  {
        alert ("No markers found to display")
        return;
    }
}

/*
 * A function to allow all markers to be cleared from the screen
 */
function clearMarkers () {
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(null);
        }
    }
    else {
        alert ("No markers avaliable to clear");
    }
}

// initilise all the page ponents by calling there load functions
function init () {
    load_grid();
    load_map();
}

Seemed to be working last night but I must have changed something before i stopped working. (which will teach me not to code tired at 2:00 am :-)) Can any of you good people shed some light?

As Requested line 16 reads:

J.toSpan=function(){return new P(this.$[Ta]()?0:this.$.d-this.$.b,ge(this.ba),i)};na(J,function(){return this.$[Ta]()||this.ba[Ta]()});function je(a,b){return function(c){if(!b)for(var d in c)a[d]||aa(ia("Unknown property <"+(d+">")));var e;for(d in a)try{var f=c[d];if(!a[d](f)){e="Invalid value for property <"+(d+(">: "+f));break}}catch(g){e="Error in property <"+(d+(">: ("+(g[dc]+")")));break}e&&aa(ia(e));return i}}function ke(a){return a==j}function le(a){try{return!!a.cloneNode}catch(b){return k}}function me(a,b){var c=Kd(b)?b:i;return function(b){return b==j&&c||b instanceof a}}

Been trying to work out what it means but cant make much of it, think it may have something to do with the JSON request object but I'm not sure

I've done something (not sure what) to my map and now a function that was running is now throwing the following error:

Invalid value for property <travelMode>: undefined line 16 main.js

The last thing I did was add the line:

directionsDisplay.setPanel(document.getElementById("directions"));

So that I can display direction details in a div. Here's my code for reference:

// This function sets-up and initiates the Google maps interface
function load_map() {

    startLatLng = new google.maps.LatLng(52.485809,-1.888783);
    // create a new Google latLang marker object with co-ords for
    //the start location
    var config = {
        zoom: 5,
        center: startLatLng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // create a JASON object to store map configruation

    map = new google.maps.Map(document.getElementById("map"), config);

    // intilise the map passing the display divs id and the config
    // object


    var startMarker = new google.maps.Marker({
        position: startLatLng,
        map: map
    })
    startMarker.setIcon('/imgs/startMarker.png');

    // create a new marker object for start (passing anonomus JASON
    // config object)
    startMarker.setMap(map);
    // Add the marker to the map
    geocodeAddress("ARM Ltd Rockingham Court 152 Rockingham Street Sheffield Great Britain");
    geocodeAddress("Centrum House 36 Station Road Egham Surrey");
    geocodeAddress("Pipers Way Swindon United Kingdom");
    // call the geocoding function to add markers to the map

}

/*
 * This function loads a marker overlay on to the location provided
 * and calls the addInfoWindow function to add an info window to it
 * @param a location: google location object representing the location at which
 * the marker is to be placed
 * @param a windowText: String variable representing the information to be attached
 * to the window.
 */

function loadMarker(location,windowText,address) {
    var tempMarker = new google.maps.Marker({
        position: location,
        map: map,
        address:address, 
        selected:"false"
    });
    google.maps.event.addListener(tempMarker, 'click',function(){
        selectLocation(tempMarker);
    });
    google.maps.event.addListener(tempMarker, 'dblclick',function(){

        deselectLocation(tempMarker);
    });
    addInfoWindow(windowText,tempMarker,tempMarker.address);
    // add an information window anchored on the marker
    tempMarker.setIcon('/imgs/workofficeMarker.png');
    markersArray.push(tempMarker);
    tempMarker.setMap(map); 
    // add the marker to the map at this location
}



/*
 * A function to geocode the string type address passed into usable
 * lat lng type co-ords
 * @param address: a String representing the address to be geocoded
 */

function geocodeAddress (address) {

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode( {'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            loadMarker(results[0].geometry.location,"Info here",address);
            latlngArray.push(results[0].geometry.location);
        } else {
            alert("Geocode was not successful for the following reason: " +" "+  status);
        }
    });
}

/*
 * This function adds an info window to each marker and allows it
 * to be activated on click.
 * @Param infoText: a String representing the data to be included in the
 * info window
 * @Param marker: a Google Marker Object to attach the Text Window to.
 */

function addInfoWindow (infoText,marker) {


    var contentString = '<div id = "windowContent">'+ 
        '<h4> Details</h4>'+'</div>'+
        '<div id ="windowContent">'
        +'</br>'
        +infoText
        + '</br>'
        + '<p><label for="mapsUkSaddr">Your address</label> <form action="http://maps.google.co.uk/maps" method="get" target="_blank">'
        + '<input type="text" name="saddr" id="mapsUkSaddr" value="" size="20"/>'
        + '<input type="submit" value="Get directions" />'
        +'<input type="hidden" name="daddr" value='  + '\"'+ marker.address +'\"' + '/>'
        +'<input type="hidden" name="hl" value="en" /> </p>'
        + '</form>'
        + '</div>';
    var tempInfoWindow = new google.maps.InfoWindow({
        content: contentString
    });
    google.maps.event.addListener(marker,'rightclick', function() {
        tempInfoWindow.open(map,marker);
    });
}

/*
 * A function to resize the bounds of the map to fit selected locations
 *              
 */

function getSelected () {

    if (markersArray.length == 0) {
        return -1;
    }

    else {
        selectedMarkersAdds = new Array();
        for (var i = 0; i < markersArrayAdds.length; i++) {
            if ( markersArray[i].selected == "true") {
                selectedMarkersAdds.push( markersArray[i].address)
            }
        }
        return  selectedMarkersAdds;
    }
}

function sizeMap() {
    var bounds = new google.maps.LatLngBounds();

    for ( var i = 0; i < 1; i++) {
        alert(latlngArray[i]);
        var tempLatLng = new google.maps.LatLng(latlngArray[i]);
        alert(tempLatLng);
        bounds.extend(tempLatLng);
    }
      map.fitBounds(bounds);
}

/*
 * This function allow a given location to be selected as a potential
 * vist location. The location is added to the selected array to 
 * allow resizing and changes the icons colour to show selection
 * @param a marker: Google maps Marker object representing the marker to be
 * selected.
 */

function selectLocation (marker) {

    var markerIndex = checkForMarker(marker);
    if (markerIndex == -1) {
        alert ("Marker specified in selection not found");
        return;
    } 
    else {
        markersArray[markerIndex].selected = "true";
        markersArray[markerIndex].setIcon('/imgs/workofficeRedMarker.png'); 
        return;
    }
}


/*
 * Allows the specified marker to be deselected
 * @param marker: a Google Maps marker object representing the marker
 * to be deselected
 */

function deselectLocation (marker) {

    var markerIndex = checkForMarker(marker);

    if (markerIndex == -1) {
        alert ("Marker specified in deselection not found");
        return;
    } 

    else {
        markersArray[markerIndex].selected = "false";
        markersArray[markerIndex].setIcon('/imgs/workofficeMarker.png');
        return;
    }
}

/*
 * This function allows a route to be calculated to each location 
 * selected and displayed: Google maps LatLng object representing the start of the route
 * @param a endLocation: Google maps LatLng object representing the end of the route
 */

function calculateRoot (startLocation,endLocation) {
    var directionsService = new google.maps.DirectionsService();
    var directionsDisplay = new google.maps.DirectionsRenderer();
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directions"));

    var request = {
        origin:startLocation,
        destination:endLocation,
        provideRouteAlternatives: true
    };   
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result);

        }
    });
}

/*
 * This function shows the route from the chosen start location
 * to all of the avaliable placement locations 
 */

function showSpiderView(){
    for (var i = 0; i<latlngArray.length; i++ ) {
        calculateRoot(startLatLng,latlngArray[i]); 
    }
    sizeMap();
}

/*
 * This function allows the selectedLocations array to be checked 
 * to see if a fiven marker has already been selected
 * @param marker: A Google maps marker type object to be searched for
 * @return integer value of array postion if marker is found -1 otherwise 
 */

function checkForMarker (marker) {

    if (markersArray.length !=0){
        for (var i = 0; i < markersArray.length; i++ ) {
            if (marker.address == markersArray[i].address){
                return i
            }
        }
    }
    else {
        return -1;
    }
}

/*
 * Display only placement locations that have been selected by the
 * user
 */

function showOnlySelected () {
    clearMarkers();
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++ ) {
            if (markersArray[i].selected == "true") {
                markersArray[i].setMap(map);
            }
        }
    }

    else {
        alert ("No locations are avaliable to show");
        return;
    }
}
/*
 * A function to allow all placement locations to be displayed
 */
function showAll () {
    clearMarkers();
    if (markersArray != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(map);
        }
    }
    else  {
        alert ("No markers found to display")
        return;
    }
}

/*
 * A function to allow all markers to be cleared from the screen
 */
function clearMarkers () {
    if (markersArray.length != 0) {
        for (var i = 0; i < markersArray.length; i ++) {
            markersArray[i].setMap(null);
        }
    }
    else {
        alert ("No markers avaliable to clear");
    }
}

// initilise all the page ponents by calling there load functions
function init () {
    load_grid();
    load_map();
}

Seemed to be working last night but I must have changed something before i stopped working. (which will teach me not to code tired at 2:00 am :-)) Can any of you good people shed some light?

As Requested line 16 reads:

J.toSpan=function(){return new P(this.$[Ta]()?0:this.$.d-this.$.b,ge(this.ba),i)};na(J,function(){return this.$[Ta]()||this.ba[Ta]()});function je(a,b){return function(c){if(!b)for(var d in c)a[d]||aa(ia("Unknown property <"+(d+">")));var e;for(d in a)try{var f=c[d];if(!a[d](f)){e="Invalid value for property <"+(d+(">: "+f));break}}catch(g){e="Error in property <"+(d+(">: ("+(g[dc]+")")));break}e&&aa(ia(e));return i}}function ke(a){return a==j}function le(a){try{return!!a.cloneNode}catch(b){return k}}function me(a,b){var c=Kd(b)?b:i;return function(b){return b==j&&c||b instanceof a}}

Been trying to work out what it means but cant make much of it, think it may have something to do with the JSON request object but I'm not sure

• javascript
• google-maps-api-3

Share Improve this question Follow edited Mar 5, 2012 at 21:22 user1079178 asked Mar 5, 2012 at 21:00 user1079178user1079178 13322 silver badges1010 bronze badges 1

• Since the error pinpoints line 16 in main.js, could you show us that code too? – Jordan Running Commented Mar 5, 2012 at 21:14

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Your request

var request = {
    origin:startLocation,
    destination:endLocation,
    provideRouteAlternatives: true
};

should also specify travelMode, eg

    travelMode: google.maps.DirectionsTravelMode.DRIVING

http://code.google./apis/maps/documentation/javascript/reference.html#DirectionsRequest

本文标签： javascriptInvalid value for property lttravelModegt undefinedwhatStack Overflow