V3 js API を使用して Google マップを作成し、マップ内に複数のマーカーを表示しています。マーカーをクリックすると、ajax 呼び出しが実行され、結果が情報ウィンドウに表示されます。マップの外側に外部リンクを追加しました。クリックすると、対応するマーカーの結果がマップの横に表示されます。以下のコードを使用して機能を実行しました..
$('#marker_link').click(function () {
var longitude = $(this).find("#longitude").val();
var latitude = $(this).find("#latitude").val();
var index = $(this).find("#index").val();
google.maps.event.trigger(gmarkers[index], "click", {
latLng: new google.maps.LatLng(latitude, longitude)
});
});
このコードは、マーカー データを正しく取得し、ウィンドウに表示しています。しかしその時、地図は真っ白になります。どうすれば修正できますか。ストアの結果と一緒にマップを保持するにはどうすればよいでしょうか。
ここで gmarkers[ ] は、マップのレンダリング中に作成されたすべてのマーカーを保持するグローバル配列です。
初めてマップにマーカーを表示するときに使用した以下のコード。
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(pLat, pLong),
});
gmarkers.push(marker);
google.maps.event.addListener(marker, 'click', function (event) {
var dataString = 'store_id=' + {{ store.store_id }}
$.ajax({
type: "GET",
url: GET_STORE_DATA,
data: dataString,
success: function(res) {
if(res != '') {
var contentString = res;
var infoWindow = new google.maps.InfoWindow({ content: contentString });
infoWindow.setPosition(event.latLng);
infoWindow.open(map);
google.maps.event.addListener(map, 'click', function() {
infoWindow.close();
});
} else {
alert('No data found')
}
}
});
});