Dynamisch Hinzufügen, Google-Map-V3-Marker mit jQuery

Ich bin das hinzufügen von Marken zu Google Maps dynamisch mit jquery und der Google Maps API V3. Wenn Sie die Taste search_button geklickt wird, wird eine Anforderung an den server gesendet, die mit AJAX, das gibt ein JSON-array von LatLng entsprechend der Ergebnisse werden verwendet, um die Marker. Aber in meinem Javascript Conole, bekomme ich die Fehlermeldung: Invalid value for property <map>: map. Wo habe ich bloß falsch gemacht? Hier ist mein code:

HTML-Header, JS:

<script type="text/javascript">
  function initialize() {
  var latlng = new google.maps.LatLng(42.354183,-71.065063);
  var options = {
    zoom: 15,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), options);
}
</script>

jQuery

$(function() {

$("#search_button").click(function(e){
    e.preventDefault();


        //Place markers on map
        for( i = 0; i < json.length; i++) {
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
        }

    });
});
});
Wie führst du den ajax-Aufruf erste und laden Sie dann die Karten mit den Markierungen? Da die Karte geladen wird, auf den Fenster-onload-und ajax-call später durchgeführt, so lat/lng empfangen werden, werden später, nachdem die Karte geladen wurde. Können Sie mir bitte helfen ich komme nicht weiter auf diese für Stunden. Wie kann ich die Kraft des Ajax-Aufrufs als Erster gehen und das array und dann laden Sie die Karte mit marker?

InformationsquelleAutor Nyxynyx | 2011-10-21

  1. 20

    sollten Sie die Globale variable mit der Bezeichnung " map. Das ist in der Tat meine Empfehlung ist es, sich zu bewegen alle, um eine javascript-Datei wie folgt

        $(document).ready(initialize);
    var map;

function initialize() {
    var latlng = new google.maps.LatLng(42.354183,-71.065063);
    var options = {
        zoom: 15,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map($('#map-canvas')[0], options);

    $("#search_button").click(function(e){
    e.preventDefault();


        //Place markers on map
        for( i = 0; i < json.length; i++) {
            var latLng = new google.maps.LatLng(json[i].lat, json[i].lng);
            var marker = new google.maps.Marker({
                position: latLng,
                map: map
            });
        }

    });
}

    InformationsquelleAutor Jorge

Schreibe einen Kommentar