Google map APIでマーカー(アイコン)を好きな画像に変える
2024/04/18
Googleマップでユーザーにマーカー画像をアップロードさせて、それをマップ表示時に出したいというケースがあった。以下にソースコードをメモ。
ソースコード
function makeMarker( addressArray ){ var marker = new google.maps.Marker({ position : new google.maps.LatLng(addressArray.x,addressArray.y), map: map <?php if( $accocuntData['icon'] != '' && file_exists(ICON_PATH . $accocuntData['icon']) ){?>,icon: '<?=ICON_URL . $accocuntData["icon"]?>'<?php } ?>//ここでアイコン指定 }); var addressArray; var infoWindow = new google.maps.InfoWindow(); google.maps.event.addListener(marker, 'click', function() { if (currentWindow) { currentWindow.close(); } infoWindow.setContent('<a href="detail.php?e='+addressArray.id+'&f=<?=$jsQuery?>">'+addressArray.name+'</a>'); infoWindow.open(map,marker); currentWindow = infoWindow; }); }
関連記事
-
Google Maps APIでリアルタイムに現在地のマーカーを更新する方法
GoogleMapAPIを使って現在地を取得してその場所にマーカーを設置、その後 ...
-
GoogleMapAPIでクリックした座標にマーカーを設置する方法
GoogleMapAPIでクリックした位置にマーカーを設置し、座標の経度緯度をテ ...
-
GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得
GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...
-
GoogleMapAPIで住所・経度緯度入力後にマーカーを移動させる
フォーム内に住所・経度・緯度のテキストボックスを設置し、住所を入力後にボタンを押 ...
-
Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
やりたかった事は以下の通り。 mysqlから経度緯度、マーカー名、マーカーIDを ...