Ein Google Maps mit Markern aus einem JSON-Array laden?

Question

// // // // // // // // Ajax returns from PHP 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     var obj = $.parseJSON(xmlhttp.responseText); 

     var tLat = getCookie("tLat"); 
     var tLng = getCookie("tLng"); 

     var options = { 
      zoom: 4, 
      center: new google.maps.LatLng(40.7257, -74.0047), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Creating the map 
     var map = new google.maps.Map(document.getElementById('map'), options); 

     // Adding a marker to the map 
     var marker1 = new google.maps.Marker({ 
      position: new google.maps.LatLng(tLat, tLng), 
      map: map, 
      title: 'Click me', 
      icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' 
     }); 

     var i = 0; 
     for(i=0;i<=10;i++) { 
      // Adding a marker to the map 
      var marker[] = new google.maps.Marker({ 
      position: new google.maps.LatLng(obj[i].lat, obj[i].lng), 
      map: map, 
      title: 'Click me', 
      icon: 'http://gmaps-samples.googlecode.com/svn/trunk/markers/blue/blank.png' 
      }); 
     } 

     $('#map').show(); 
    } 
} 
// // // // // // // // 

Also habe ich ein JSON-Array und ich versuche, die ersten zehn Marker zu laden. Mein JavaScript in der for-Schleife ist ein wenig fehlerhaft und ich versuche eine Lösung zu entwickeln, die die Marker korrekt aus dem JSON-Array hinzufügt. Der erste Marker über der for-Schleife wird korrekt geladen. Hat jemand das schon mal gemacht?

P.S. Ich habe das auch versucht, was auch nicht funktioniert. Meine Warnung zeigt Fließkommawerte mit sieben Nachkommastellen.

// // // // // // // // Ajax returns from PHP 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     var obj = $.parseJSON(xmlhttp.responseText); 

     var tLat = getCookie("tLat"); 
     var tLng = getCookie("tLng"); 

     var options = { 
      zoom: 4, 
      center: new google.maps.LatLng(40.7257, -74.0047), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Creating the map 
     var map = new google.maps.Map(document.getElementById('map'), options); 

     alert(obj[0][1]+','+obj[0][2]); 

     //var myLatLng = new google.maps.LatLng(40.7257, -74.0047); 
     var myLatLng = new google.maps.LatLng(String(obj[0][1]), String(obj[0][2])); 

     var marker = new google.maps.Marker({ position: myLatLng, map: map }); 

     $('#map').show(); 
    } 
} 
// // // // // // // // 

P.P.P.S. Meine Alarmbox für obj kommt mit -84.3132324,34.0393598, die wie das benötigte Format aussieht.

Answer 1

// // // // // // // // Ajax returns from PHP 
xmlhttp.onreadystatechange=function() { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     var obj = $.parseJSON(xmlhttp.responseText); 

     var tLat = getCookie("tLat"); 
     var tLng = getCookie("tLng"); 

     var options = { 
      zoom: 4, 
      center: new google.maps.LatLng(tLat, tLng), 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     // Creating the map 
     var map = new google.maps.Map(document.getElementById('map'), options); 



     var myLatLng = new google.maps.LatLng(parseFloat(obj[0][2]), parseFloat(obj[0][1])); 

     //var marker = new google.maps.Marker({ position: myLatLng, map: map }); 

     var marker; 

     for(var i=0;i<obj.length;i++) { 

      var myLatLng = new google.maps.LatLng(parseFloat(obj[i].lat), parseFloat(obj[i].lng)); 

      var marker = new google.maps.Marker({ position: myLatLng, map: map }); 
     } 

     $('#map').show(); 
    } 
} 
// // // // // // // // 

Wie dies stellt sich heraus, ist eine der Möglichkeiten, um die Dinge funktionieren mit APIv3