勉強したことのメモ

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でマーカーを複数表示し、近隣のエリアごとにまとめて ...

GoogleMapAPIでジオコーディングできない場合の対応方法
GoogleMapAPIでジオコーディングできない場合の対応方法

住所から経度緯度を取得するジオコーディングをGoogleMapAPIを用いて行お ...

Google Maps APIでメインカラーを変更する方法
Google Maps APIでメインカラーを変更する方法

GoogleMapAPIを用いたMAPでカラー変更をしたかった。カラーコードの指 ...

Google Maps APIでヒートマップを表示する方法
Google Maps APIでヒートマップを表示する方法

Google Maps APIで花粉状況や雨量を可視化しやすいようなヒートマップ ...

Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法
Google Maps APIとPHPを組み合わせて複数マーカーとウィンドウを連携させる方法

やりたかった事は以下の通り。 mysqlから経度緯度、マーカー名、マーカーIDを ...