勉強したことのメモ

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とPHPを組み合わせて複数マーカーとウィンドウを連携させる方法

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

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

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

androidでgeolocationを使うとtimeoutになる

Geolocation APIを用いて現在地をGoogleMapに表示させるとい ...

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

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

HTML5のGeolocation APIで位置情報を取得してGoogleMapAPIで使用する方法

GPSみたいな位置情報を取得しGoogleMapAPIでその場所を反映させたかっ ...