Einstellung Marker auf Google Map funktioniert nicht

Question

Ich habe eine JSON-Daten, die Lat und lange Werte für Städte hat. Ich muss es auf Google Map platzieren und Markierungen darauf setzen. Hier ist mein Code:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 

<div id = "map"> 
    <script type="text/javascript"> 
    var map; 
    function init(){ 
     var options = { 
     zoom:11, 
     center : new google.maps.LatLng(37.542571,-121.993037) 
     }; 
     map = new google.maps.Map(document.getElementById("map"),options); 
    }; 
    var jsonData = { 
     "locations": 
     { 
      "location": 
      [ 
       { 
       "id": "0001", 
       "type": "RetailLocation", 
       "address": "Fremont, CA 94538", 
       "latitude":37.542571, 
       "longitude":-121.993037, 
       "$revenue": 10000000 
       }, 
       { 
       "id": "0002", 
       "type": "RetailLocation", 
       "address": "Newark, CA", 
       "latitude": 37.525400, 
       "longitude":-122.037764, 
       "$revenue": 3000000 
       }, 
       { 
       "id": "0003", 
       "type": "RetailLocation", 
       "address": "4100-4198 Pleiades Pl,Union City, CA 94587", 
       "latitude": 37.587546, 
       "longitude":-122.066716, 
       "$revenue": 120000000 
       }, 
       // ... 
      ] 
     } 
    }; 

    $(document).ready(function(){ 
     $.each(jsonData.locations.location,function(key,json){ 
     var latLng = new google.maps.LatLng(json.latitude,json.longitude); 

     var marker = new google.maps.Marker({ 
      position: latLng 
     }); 
     marker.setMap(map); 
     }); 
    }); 
    </script> 
</div> 

Ich habe versucht, das Problem zu debuggen. Ich bekomme die lat und long Werte von jeder Schleife. Wenn ich jedoch versuche, es mithilfe eines Markers auf die Karte zu setzen, wird es nicht angezeigt. Kann mir jemand helfen?

Answer 1

Sie müssen Ihren Rückruf zu Google Script hinzufügen. Dokument. OnReady löst kein kartenbereites Ereignis aus.

<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> 
</script>