Uncaught InvalidValueError: keine LatLngBounds oder LatLngBoundsLiteral: unbekannte Eigenschaft f

Question

Ich benutze Google map zeige die multiple location Ich möchte den Pfad dazwischen zeichnen. Mein Weg zeigt richtig, aber an Konsole ich erhalte diesen Fehler

Uncaught InvalidValueError: not a LatLngBounds or LatLngBoundsLiteral: unknown property f

<script> 

var markers; 

function GetLocation() { 

    var id = document.getElementById("Code").value; 

    var request = $.ajax({ 
     url: "Path", 
     type: "GET", 
     data:"data="+id, 
     dataType: "html" 
    }); 
    request.done(function(json_data) { 
     // alert(json_data); 
     var obj = JSON.parse(json_data); 

     markers = obj; 

     if (obj[0].result == "Failed") 
     { 
      alert("No Location Found"); 
     }else{ 
      initialize(); 
     } 


    }); 
    request.fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 

    //The list of points to be connected 
    //google.maps.event.addDomListener(window, 'load', initialize); 

} 


      //var map = null; 
      var infowindow = new google.maps.InfoWindow(); 
      var bounds = new google.maps.LatLngBounds(); 
      // var map; 
      function initialize() { 
       var mapOptions = { 
        center: new google.maps.LatLng(
          parseFloat(markers[0].lat), 
          parseFloat(markers[0].lng)), 
        zoom: 15, 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
       }; 
       var service = new google.maps.DirectionsService(); 

       var infoWindow = new google.maps.InfoWindow(); 
       map = new google.maps.Map(document.getElementById("map"), mapOptions); 
       var lat_lng = new Array(); 

       var marker = new google.maps.Marker({ 
        position: map.getCenter(), 
        map: map, 
        draggable: true 
       }); 
       bounds.extend(marker.getPosition()); 
       google.maps.event.addListener(marker, "click", function(evt) { 
        // infowindow.setContent("Address:" + marker.getPosition().toUrlValue(7)); 
        infowindow.open(map, marker); 
       }); 
       for (var i = 0; i < markers.length; i++) { 
        if ((i + 1) < markers.length) { 
         var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
           parseFloat(markers[i].lng)); 
         createMarker(src); 

         var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat), 
           parseFloat(markers[i + 1].lng)); 
         createMarker(des); 
         // poly.setPath(path); 
         service.route({ 
          origin: src, 
          destination: des, 
          travelMode: google.maps.DirectionsTravelMode.DRIVING 
         }, function(result, status) { 
          if (status == google.maps.DirectionsStatus.OK) { 
           var path = new google.maps.MVCArray(); 
           var poly = new google.maps.Polyline({ 
            map: map, 
            strokeColor: '#F3443C' 
           }); 
           for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
            path.push(result.routes[0].overview_path[i]); 
           } 
           poly.setPath(path); 
           map.fitBounds(bounds); 
          } 
         }); 
        } 
       } 
      } 

      function createMarker(latLng) { 
       var marker = new google.maps.Marker({ 
        position: latLng, 
        map: map, 
        draggable: true 
       }); 
       bounds.extend(marker.getPosition()); 
       google.maps.event.addListener(marker, "click", function(evt) { 
        var address; 
        //      alert(this.getPosition().toUrlValue(6)); 

        var geocoder = new google.maps.Geocoder(); 
        geocoder.geocode({'latLng': this.position}, function(results, status) { 
         if (status == google.maps.GeocoderStatus.OK) { 
          alert(results[0].formatted_address); 
          address = results[0].formatted_address; 
          infoWindow.setContent("Address:" + address); 
          infowindow.open(map, this); 
         } else { 
          alert('Geocoder failed due to: ' + status); 
         } 
        }); 


       }); 
      } 

</script> 

<div id='map'></div> 

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY"> 
</script> 

Answer 1

Probleme:

1. Sie laden die API asynchron (mit async defer), aber es gibt keinen Rückruf-Parameter.
2. Sie erstellen die Variablen bounds und infoWindow (die von der API abhängig sind), bevor die API geladen wurde.
3. Sie Rechtschreibung das Infowindow-Objekt unterschiedlich (infowindow, Infofenster), Javascript ist empfindlich Fall sind die verschiedenen Variablen
4. Sie verwenden this innerhalb der Rückruf für den Geocoder für die klickten Marker, die this innerhalb der Geocoder Callback-Funktion unterscheidet sich von this innerhalb des Click-Listener-Callbacks, Sie müssen die this speichern, die sich auf den Marker bezieht, der zum Öffnen des Infofensters verwendet werden soll.

proof of concept fiddle

Code-Schnipsel:

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="Code" value="27" /> 
 
<script> 
 
    var markers = [{ 
 
    lat: 40.7127837, 
 
    lng: -74.0059413 
 
    }, { 
 
    lat: 40.735657, 
 
    lng: -74.1723667 
 
    }]; 
 

 
    function GetLocation() { 
 

 
    var id = document.getElementById("Code").value; 
 

 
    var request = $.ajax({ 
 
     url: "Path", 
 
     type: "GET", 
 
     data: "data=" + id, 
 
     dataType: "html" 
 
    }); 
 
    request.done(function(json_data) { 
 
     var obj = JSON.parse(json_data); 
 

 
     if (!obj || !obj[0]) { 
 
     initialize(); 
 
     } else if (obj[0].result == "Failed") { 
 
     alert("No Location Found"); 
 
     } else { 
 
     markers = obj; 
 
     initialize(); 
 
     } 
 
    }); 
 
    request.fail(function(jqXHR, textStatus) { 
 
     // alert("Request failed: " + textStatus); 
 
     initialize(); 
 
    }); 
 
    } 
 

 
    var infoWindow; 
 
    var bounds; 
 

 
    function initialize() { 
 
    infoWindow = new google.maps.InfoWindow(); 
 
    bounds = new google.maps.LatLngBounds(); 
 
    var mapOptions = { 
 
     center: new google.maps.LatLng(
 
     parseFloat(markers[0].lat), 
 
     parseFloat(markers[0].lng)), 
 
     zoom: 15, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }; 
 
    var service = new google.maps.DirectionsService(); 
 

 
    map = new google.maps.Map(document.getElementById("map"), mapOptions); 
 
    var lat_lng = new Array(); 
 

 
    var marker = new google.maps.Marker({ 
 
     position: map.getCenter(), 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    google.maps.event.addListener(marker, "click", function(evt) { 
 
     infowindow.open(map, marker); 
 
    }); 
 
    for (var i = 0; i < markers.length; i++) { 
 
     if ((i + 1) < markers.length) { 
 
     var src = new google.maps.LatLng(parseFloat(markers[i].lat), 
 
      parseFloat(markers[i].lng)); 
 
     createMarker(src); 
 

 
     var des = new google.maps.LatLng(parseFloat(markers[i + 1].lat), 
 
      parseFloat(markers[i + 1].lng)); 
 
     createMarker(des); 
 
     service.route({ 
 
      origin: src, 
 
      destination: des, 
 
      travelMode: google.maps.DirectionsTravelMode.DRIVING 
 
     }, function(result, status) { 
 
      if (status == google.maps.DirectionsStatus.OK) { 
 
      var path = new google.maps.MVCArray(); 
 
      var poly = new google.maps.Polyline({ 
 
       map: map, 
 
       strokeColor: '#F3443C' 
 
      }); 
 
      for (var i = 0, len = result.routes[0].overview_path.length; i < len; i++) { 
 
       path.push(result.routes[0].overview_path[i]); 
 
      } 
 
      poly.setPath(path); 
 
      map.fitBounds(bounds); 
 
      } 
 
     }); 
 
     } 
 
    } 
 
    } 
 

 
    function createMarker(latLng) { 
 
    var marker = new google.maps.Marker({ 
 
     position: latLng, 
 
     map: map, 
 
     draggable: true 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    google.maps.event.addListener(marker, "click", function(evt) { 
 
     var address; 
 
     var that = this; 
 
     var geocoder = new google.maps.Geocoder(); 
 
     geocoder.geocode({ 
 
     'latLng': this.position 
 
     }, function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
      address = results[0].formatted_address; 
 
      infoWindow.setContent("Address:" + address); 
 
      infoWindow.open(map, that); 
 
     } else { 
 
      alert('Geocoder failed due to: ' + status); 
 
     } 
 
     }); 
 
    }); 
 
    } 
 
</script> 
 

 
<div id='map'></div> 
 

 
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=GetLocation"> 
 
</script>