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

2014/07/14 2015/04/22

Googleマップでユーザーにマーカー画像をアップロードさせて、それをマップ表示時に出したいというケースがあった。

アップロードとかその辺はPHPでやるとして、マップ側はどうすんの、と思ったらちゃんと用意されてた。

	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;
		});
	}

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;

});

}

- その他 GoogleMap

: シンタックスシュガー

探し物をしている時に｢シンタックスシュガー｣という言葉があり、何それとなったの ...

: モダンブラウザとレガシーブラウザ

業務中「モダンブラウザ」と聞いたことの無い単語があったので調べてみた。標準の ...

: PHPのバージョンが古くてjson_decodeが使えない

PHPのバージョンが古くてjson_decodeが使えないという状況があった。ま ...

: Googleアナリティクスのデータ保持設定

Googleアナリティクスにデータ保持設定というのが導入され、デフォルトのままだ ...

: windows7にてIEのダウングレード

ぱっと見てわからなかったのでメモ。コントロールパネル ↓ プログラムのアンイン ...

: window.NREUMみたいなのがヘッダーとフッターに自動で挿入されてる

作っていたプログラムをブラウザからソース確認した時に見つけたんだけど、「wind ...

: javascriptの圧縮

javascriptの圧縮を自身で行えると聞いたので調べたところ、そういうオン ...

: RLoginで接続が途切れる

SSH接続して作業する際はRLoginを使用しているけど、サーバー接続後に放置し ...

: 画面遷移図を簡単に作れるサイト

画面遷移図を用意する必要があった。ただ、作ったこともないし作り方もわからない。で ...

: ウィジウィグとは

ちょいちょい「ウィジウィグ」という単語を聞くけど、実際にどういうものなのかよく ...

PREV: Rubyで基本的な構文のメモ
NEXT: WordPressで逆アクセスランキングの設置

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

関連記事