Google Maps JavaScript APIとMySQL/AJAX

Question

MySQLデータベースからマーカー（座標など）のデータを取得しようとしていますが、これらのマーカーをクリックリスナーでマップに追加してinfoWindowを開きます。

// Request to database 
    function getLocations() { 
     if (window.XMLHttpRequest) { 
      var xmlhttp = new XMLHttpRequest(); 
     } else {     
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 

     xmlhttp.open("POST", "getlocations.php", true); 
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 


     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 

       var returnValue = JSON.parse(xmlhttp.responseText); 
       var infoWindow = new google.maps.InfoWindow; 

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

        var marker = new google.maps.Marker({ 
         map: map, 
         icon: icons['ice_green'].icon, 
         position: new google.maps.LatLng(returnValue[i][2], returnValue[i][3]), 
         title: '' + returnValue[i][1], 
        }); 

        marker.addListener('click', function() { 
         infoWindow.setContent('test'); 
         infoWindow.open(map, marker); 
        }); 
       } 
      } 
     }; 

     xmlhttp.send(); 
    } 




    function initMap() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 35.4681174, lng: 5.3043723}, 
     zoom: 17 
    }); 

    getLocations(); 
    } 

これまでのところ、すべての作品：

は、ここに私のコードです。マークは正しい位置にありますが、マークをクリックすると、最後に追加されたマーカーに対してのみ "infoWindow"が開きます。

問題はどこだ？

ありがとうございました

Answer 1

回答を更新しました。以下のコードは基本的に2番目のコードページのものと同じです。

var map; 
var infoWindow; 

google.maps.event.addDomListener(window, "load", function() { 

    initMap(); 

    var retVals = [{lat:33.808678, lng:-117.918921}, {lat:33.708378, lng:-117.918920}, {lat:33.700378, lng:-117.917920}]; 
    callbackAjax(retVals, map); 
}); 

function initMap(){ 
    map = new google.maps.Map(document.getElementById("map_div"), { 
    center: new google.maps.LatLng(33.808678, -117.918921), 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }); 
infoWindow = new google.maps.InfoWindow(); 
} 

function callbackAjax(returnValue, map){ 

    for(var i=0; i<returnValue.length; i++) { 
    createMarker(map, returnValue[i].lat, returnValue[i].lng, "<h1> test"+ i + "</h1><p>content</p>"); 
    } 

    function createMarker(map, lat, lng, content){ 
    var marker = new google.maps.Marker({ 
     map: map, 
     position: new google.maps.LatLng(lat, lng), 
     title: 'title'+i, 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
     infoWindow.setContent(content); 
     infoWindow.open(map, this); 
    }); 
    return marker; 
    } 
} 

編集： 私は単純なコードペンを作っています。おそらくこれが役立ちます。 http://codepen.io/zelle7/pen/dvxgVb

EDIT2：このcodpenは、あなたのニーズに合わせて、多分良いですhttp://codepen.io/zelle7/pen/XMvxzy

Answer 2

ソリューションdidn'tの仕事の両方。

だから、私はforループまたはクリックリスナー内の内部情報ウィンドウを初期化しても、ウィンドウは、最後markesに表示されます： -/

あなたしかこの行を入れinfoWindow` `1を作成している