Google Mapsのinfowindowにmysqlデータを追加

Question

私はデータベースにlatとlongを使って地図上にマーカーを表示しました。そのユーザーの緯度と経線に対応する他の行が情報ウィンドウに表示されるようになりました。例えば。彼らの名前、ID。私はこれについてどうやって行くのですか？

var infowindow = new google.maps.InfoWindow({ 
    content: " .$member" + ".$memberID" (<<< something like that) 

    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(dis.latitude,dis.longitude), 
    map: maps 
    })) 

infowindow.open(window.googleMap,marker); 

Answer 1

あなたは正しい考えがあるようです。これを行うには、データベースにある値をいくつかの変数に格納する必要があります。あなたのDBのlatとlongで行ったのと同様です。また、通常はインフォウィンドウ内に移動したいすべての文字列を最初に作成することをお勧めします。インフォウィンドウで必要なデータベースの値を保持するメンバーおよびIDという名前の変数があると仮定します。

var contentString = 'some content' + member + 'other content' + ID; 

var infowindow = new google.maps.InfoWindow({ 
content: contentString 
}); 

marker = new google.maps.Marker({ 
position: new google.maps.LatLng(dis.latitude,dis.longitude), 
map: map 
})); 

marker.addListener('click', function() { 
infowindow.open(map, marker); 
}); 

これにより、マーカーをクリックするとインフォ画面が表示されるようになります。あなたはそれはマーカーがマップに置かれると同時に表示することを希望する場合は、あなたのマーカーにリスナーを追加する必要はありません、あなただけ呼び出すことができます。

infowindow.open(map.marker) 

を作成した直後マーカー。私はこれをJSFiddleでここに示しました。私は、リスナーをマーカーに追加するコードをコメントアウトして、情報ウィンドウがすぐに表示されるようにしました。これが機能するには独自のAPIキーを挿入する必要があります。フィドルここを参照してください：

https://jsfiddle.net/c01xxg29/

情報ウィンドウ上の良い文書はここにもあります：

https://developers.google.com/maps/documentation/javascript/infowindows#introduction

私はこれが役に立てば幸い！