Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
2024/04/18
やりたかった事は以下の通り。
- mysqlから経度緯度、マーカー名、マーカーIDを持ってきてgooglemapにマーカーを刺す
- マーカーをクリックするとウィンドウが表示
- ウィンドウの中にマーカー名とリンクを表示。リンクは[?key=マーカーID]みたいにクエリをそれぞれつけたい
ソースコード
var currentWindow = null;
var latlng = new google.maps.LatLng(<?=$addressList[0]['x']?>,<?=$addressList[0]['y']?>); //初期位置
var myOptions = {
zoom: 12,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成
<?php for($i = 0; $i < count($addressList); $i++){ ?>
var addressArray = {
'id':'<?=$addressList[$i]["id"]?>',
'name':'<?=$addressList[$i]["name"]?>',
'x':'<?=$addressList[$i]["x"]?>',
'y':'<?=$addressList[$i]["y"]?>'
};
makeMarker(addressArray);
<?php } ?>
//マーカー作成
function makeMarker( addressArray ){
var marker = new google.maps.Marker({
position : new google.maps.LatLng(addressArray.x,addressArray.y),
map: map
});
var addressArray;
var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (currentWindow) {
currentWindow.close();
}
infoWindow.setContent('マーカー名:'+addressArray.name+'<br><a href="detail.php?e='+addressArray.id+'&f=<?=$folder_id?>">詳細はコチラ</a>');
infoWindow.open(map,marker);
currentWindow = infoWindow;
});
}
$addressListに予めMySQLから、マーカー情報を呼び出して配列で突っ込んでおく。
関連記事
-
-
Google Maps APIでリアルタイムに現在地のマーカーを更新する方法
GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...
-
-
HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法
GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...
-
-
GoogleMapAPIのジオコードで存在するはずの住所が見つからない場合の原因について(ZERO_RESULTS)
GoogleMapAPIを利用したプログラムで確かに存在するはずの住所をジオコー ...
-
-
Google Maps APIでヒートマップを表示する方法
Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...
-
-
Google Maps APIでメインカラーを変更する方法
GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...