Problem Google Karte zu aktualisieren Ort durch Geocoding eine Suche des Benutzers

Question

Ich versuche, meine Karte mit den Benutzern in der mapSearch-Box eingegeben zu aktualisieren, wenn sie submit schlagen, aber ich vermisse etwas, das die Funktion onclick mit dem Senden nicht verbindet latlng Variable.

var geocoder; 
var map; 
function initialize() { 

geocoder = new google.maps.Geocoder(); 
var latlng =new google.maps.LatLng(-34.397,150.644); 

    var mapProp = { 
    center: latlng, 
    } 
var map=new google.maps.Map(document.getElementById("googleMap"), mapProp); 

    }; 

var searchBox = new google.maps.places.SearchBox(document.getElementById('mapsearch')); 

google.maps.event.addDomListener(searchBox, 'places_changed', function(){ 

    var places = searchBox.getPlaces(); 

    var bounds = new google.maps.LatLngBounds(); 
    var i, place; 

    for (i=0; place=places[i]; i++){ 

    bounds.extend(place.geometry.location); 

    } 
}); 


$("#Submit").click(function codeAddress(){ 
    var address = document.getElementById("mapsearch").value; 
    geocoder.geocode({'mapsearch': address}, function(results, status) { 
    if (status == google.maps.GeocoderStatus.OK){ 
     map.setCenter(results[0].geometry.location); 
     var marker = new google.maps.Marker({ 
     map: map, 
     position: results [0].geometry.location 
     }); 

    } else { 
     alert("Geocode was not successful for the following reason: " + status); 
    } 
    }); 
}); 

Answer 1

Ich erhalte einen Javascript-Fehler mit dem entsandten Code: InvalidValueError: unknown property mapsearch auf dieser Linie:

$("#Submit").click(function codeAddress() { 
    var address = document.getElementById("mapsearch").value; 
    geocoder.geocode({ 
    'address': address 
    }, 

Code-Schnipsel:

var geocoder; 
 
var map; 
 

 
function initialize() { 
 

 
    geocoder = new google.maps.Geocoder(); 
 
    var latlng = new google.maps.LatLng(-34.397, 150.644); 
 

 
    var mapProp = { 
 
    center: latlng, 
 
    zoom: 3 
 
    } 
 

 
    var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); 
 

 

 

 
    $("#Submit").click(function codeAddress() { 
 
    var address = document.getElementById("mapsearch").value; 
 
    geocoder.geocode({ 
 
     'address': address 
 
     }, 
 
     function(results, status) { 
 
     if (status == google.maps.GeocoderStatus.OK) { 
 
      map.setCenter(results[0].geometry.location); 
 
      var marker = new google.maps.Marker({ 
 
      map: map, 
 
      position: results[0].geometry.location 
 
      }); 
 

 
     } else { 
 
      alert("Geocode was not successful for the following reason: " + status); 
 
     } 
 
     }); 
 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<input id="Submit" type="button" value="submit" /> 
 
<input id="mapsearch" value="New York, NY" /> 
 
<div id="googleMap"></div>

geocoder.geocode({'mapsearch': address}, (die 'Adresse' sein sollte)