勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

Google map APIでマーカー(アイコン)を好きな画像に変える

   2024/04/18  Google Maps API Google

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 Google

  関連記事

Google Maps APIで現在地取得と目的地までのルートを表示させる方法
Google Maps APIで現在地取得と目的地までのルートを表示させる方法

Google Maps APIを使って現在地を取得しつつ、目的地までのルートを表 ...

Advanced Custom FieldsでGoogleMapの使用する方法
Advanced Custom FieldsでGoogleMapの使用する方法

Advanced Custom FieldsでGoogleMapを使用したかった ...

GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得
GoogleMapAPIでマップ自体を移動し中心地の経度緯度を取得

GoogleMapでマップ自体をドラッグして移動した後、中心地の経度緯度を取得し ...

Google Maps APIで住所から経度緯度を取得する方法
Google Maps APIで住所から経度緯度を取得する方法

やりたかった事はformに住所を入れてsubmitする際に、javascript ...

Google Maps APIでマーカーが全て表示されるように自動ズームする方法
Google Maps APIでマーカーが全て表示されるように自動ズームする方法

Google Maps APIでマーカーを複数設置した場合にズームの値や、マーカ ...