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から、マーカー情報を呼び出して配列で突っ込んでおく。
関連記事
-
-
GoogleMapAPIでクリックした座標にマーカーを設置する方法
GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテ ...
-
-
Google Maps APIでヒートマップを表示する方法
Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...
-
-
スマホでページ内リンクからGoogleMapアプリを開く
スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...
-
-
Google Maps APIで半径●メートル範囲を円で表示する方法
Google Maps APIでマーカーを立てて、そこから範囲●mもしくは●km ...
-
-
androidでgeolocationを使うとtimeoutになる
Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...