マーカーに旧Googleマイマップのアイコンを利用する｜Google Maps API v3

Google Maps API(v3) を利用して表示したマーカー(アイコン)は、
Google Chart APIで提供されている様々なアイコンに変更することができますが、
Googleマイマップを利用した際に選択できるアイコンも、
URLまたはURLDataスキームを利用することで表示することができます。

概要

1 Google マイマップアイコンについて
2 地図の表示
3 サンプルコード

Google マイマップアイコンについて

Googleマイマップではマーカーアイコンの変更は、
画面上のUIによって選択し変更することができます。

画面上のUIによって表示される各アイコンを外部から利用する際の、
画像URL等はマニュアルなどによって公開されているわけではありません。

ですが、一般に公開されているアイコンであり、
URLさえ明確に指定する事ができれば、
Google Maps APIからも同様の画像を利用することができます。

以下では、Googleマイマップで選択可能なアイコンを、
一覧化しデータURLを含めてご紹介しています。

(旧)マーカーイメージ(ピン・アイコン・画像URL・Data URLスキーム)｜Google マイマップ

希望のアイコンのURLが分かればサンプルソースの指定方法を利用して、
見た目がGoogleマイマップとそん色のないマーカーを配置することができます。

地図の表示

指定したGPS座標を中心にマーカー(アイコン)を表示します。
表示するマーカーの画像はGoogleマイマップのイメージのURLを指定して設定しています。

サンプルコード

HTML

HTMLではGoogle Mapを表示するエリア(<div id=”gmap_canvas”></div>)を配置しています。
エリアを囲んでいる「<div class=”aspect”></div>」部分は、
ページ表示用の高さ制御用のタグです。

<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

1	<div class="aspect"><div id="gmap_canvas" class="g_canvas"></div><span id="ver" style="font-size: 0.8em; color: gray;"></span></div>

CSS

CSSではclass=”aspect”に対して、幅100%を指定し、高さをビューポートの50%としています。 GoogleMapを表示するエリア(id=”gmap_canvas”)のサイズを、 class=”aspect”に対しての幅・高さを100%として指定しています。

<style type="text/css">
	.aspect{
		width:100%;
		height:50vw;
	}
	.aspect_normal,
	.aspect_dot,
	.aspect_key,
	.aspect_dotkey{
		width:100%;
		height:25vw;
	}
	#gmap_canvas,
	#gmap_canvas_normal,
	#gmap_canvas_dot,
	#gmap_canvas_key,
	#gmap_canvas_dotkey,
	div.g_canvas{
		width:100%;
		height:100%;
	}

</style>

.aspect{

width:100%;

height:50vw;

}

.aspect_normal,

.aspect_dot,

.aspect_key,

.aspect_dotkey{

width:100%;

height:25vw;

}

#gmap_canvas,

#gmap_canvas_normal,

#gmap_canvas_dot,

#gmap_canvas_key,

#gmap_canvas_dotkey,

div.g_canvas{

width:100%;

height:100%;

}

</style>

JavaScript

Markerオブジェクト(def_marker)を作成し対象に
gmap_canvas を指定しています。
Markerオブジェクトを作成する際にiconを指定しています。

<script type="text/javascript">
	function init(){
		var map_div = document.getElementById("gmap_canvas");
		var gmap_canvas = new google.maps.Map(map_div,{
			center: new google.maps.LatLng(34.839450, 134.693903),
			zoom : 14,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		var srv_imgurl = "http://www.gstatic.com/mapspro/images/stock/1485-weather-sunny.png";

		var srv_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(34.828028, 134.689990),
			icon: srv_imgurl
		});

		var g_imgurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAADRUlEQVRIS7WVaUhUURiGn6FxpplpMVqkhdCyxQLRkjaJJmqKlh9jKxVG+EMNg7KFIqgmirAytB8tFASVFpWFkRLlj2wTpaIoBA1JIVukQC3HWTSMc/Xm8Tozd0A6/2bud57z3u9773sMhF52YBEQ2VPWApQDT4NtMwR54DIZ2Rc5BByJGGPHYhJ1dd/wl72l0+2lze3lPHBUu18LjLSZqZwwmokXs7DY4wMfV/4eMs/haWii3tdBMiCUK0sGRpqNVK9byKiCvd2KQq2WNthxEX9xBfVuH/NU6D+g2Ujp0kQcJS4i9GDy8+kZeL785Gqbl+2yQrvNTFnjNYyib+rq/ANFL+DEbfjQAEsS4OAGWBwPhh4pDU0wIxO/x89yMTDlb6uJynNZzN22tBfW1QWFT2DnJTiyGWZOhNJXcK8Cig5C0pTeWlch5BVT9qudZQIoLNHcfAtkdc2/IfUMTB4Lp9LAHAE1n2FDDmSthowVvUChMiateyYCaJ86jpLay9jk3tQ2wsYcWJsMhzbpd9W2ho52H3MU4OxYil+fZfhAgEk7aX1Th/P/AKNGUPq9AKusMFAP1TbsToGtS/q2wbBK+Z2o+rCr/gpER/Wd8s2nkH0ZDqyH+OjgU373CeZm4/F3YlWAw6w8znbicG3pe6rqw/z7UFUb2IdiR+ppOu5WUOTxs1lVaLeaefzlGhGydfRnC5JlYoCGf5+eMHd2CgnHt2IOB6TWyOq04RAN1Gt7GQouUmf5IaV3M4Q6LZAhg7kQH8O2l7kMDkdlXAbemkZOAi61vl8eWiKoubGfKOf80Ejx/ebe5aPbxzS5MlBiO21m7miTR94kDSIReKcHRGSjYxaOB0cCZ+PKw3ieV/dmoC5QJJDJyNdHx/pfA9IgxsnRH6yH8mGuBXHs1w4oeQ++ihpy5EGEo1DUKCqr8rAkTOreIn1iAdX1s412rhYTN9JXsCk/vfuJMHFBuXJ97grmgWD3slrvjBpBoZpEaohqJxvuKyt1Qy38fHaKkeLaXH2UH24vY0I5VE8h6msLyKWH3BSJMiAg4Jw6nuutbgY1tSiw4oEClVuxB6L7RroFAjTMQp3BQEtrO0l6oREWEMjvAQW1i3rQX/iBJRDvVMUUAAAAAElFTkSuQmCC";

		var g_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(34.835287, 134.693534),
			icon: g_imgurl
		});
	}

	function create_marker(options){
		var m =  new google.maps.Marker(options);
		return m;
	}
	google.maps.event.addDomListener(window,"load",init);
	$('#ver').text(google.maps.version);
</script>

function init(){

var map_div = document.getElementById("gmap_canvas");

var gmap_canvas = new google.maps.Map(map_div,{

center: new google.maps.LatLng(34.839450, 134.693903),

zoom : 14,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

var srv_imgurl = "http://www.gstatic.com/mapspro/images/stock/1485-weather-sunny.png";

var srv_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(34.828028, 134.689990),

icon: srv_imgurl

});

var g_imgurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAgCAYAAAASYli2AAADRUlEQVRIS7WVaUhUURiGn6FxpplpMVqkhdCyxQLRkjaJJmqKlh9jKxVG+EMNg7KFIqgmirAytB8tFASVFpWFkRLlj2wTpaIoBA1JIVukQC3HWTSMc/Xm8Tozd0A6/2bud57z3u9773sMhF52YBEQ2VPWApQDT4NtMwR54DIZ2Rc5BByJGGPHYhJ1dd/wl72l0+2lze3lPHBUu18LjLSZqZwwmokXs7DY4wMfV/4eMs/haWii3tdBMiCUK0sGRpqNVK9byKiCvd2KQq2WNthxEX9xBfVuH/NU6D+g2Ujp0kQcJS4i9GDy8+kZeL785Gqbl+2yQrvNTFnjNYyib+rq/ANFL+DEbfjQAEsS4OAGWBwPhh4pDU0wIxO/x89yMTDlb6uJynNZzN22tBfW1QWFT2DnJTiyGWZOhNJXcK8Cig5C0pTeWlch5BVT9qudZQIoLNHcfAtkdc2/IfUMTB4Lp9LAHAE1n2FDDmSthowVvUChMiateyYCaJ86jpLay9jk3tQ2wsYcWJsMhzbpd9W2ho52H3MU4OxYil+fZfhAgEk7aX1Th/P/AKNGUPq9AKusMFAP1TbsToGtS/q2wbBK+Z2o+rCr/gpER/Wd8s2nkH0ZDqyH+OjgU373CeZm4/F3YlWAw6w8znbicG3pe6rqw/z7UFUb2IdiR+ppOu5WUOTxs1lVaLeaefzlGhGydfRnC5JlYoCGf5+eMHd2CgnHt2IOB6TWyOq04RAN1Gt7GQouUmf5IaV3M4Q6LZAhg7kQH8O2l7kMDkdlXAbemkZOAi61vl8eWiKoubGfKOf80Ejx/ebe5aPbxzS5MlBiO21m7miTR94kDSIReKcHRGSjYxaOB0cCZ+PKw3ieV/dmoC5QJJDJyNdHx/pfA9IgxsnRH6yH8mGuBXHs1w4oeQ++ihpy5EGEo1DUKCqr8rAkTOreIn1iAdX1s412rhYTN9JXsCk/vfuJMHFBuXJ97grmgWD3slrvjBpBoZpEaohqJxvuKyt1Qy38fHaKkeLaXH2UH24vY0I5VE8h6msLyKWH3BSJMiAg4Jw6nuutbgY1tSiw4oEClVuxB6L7RroFAjTMQp3BQEtrO0l6oREWEMjvAQW1i3rQX/iBJRDvVMUUAAAAAElFTkSuQmCC";

var g_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(34.835287, 134.693534),

icon: g_imgurl

});

}

function create_marker(options){

var m = new google.maps.Marker(options);

return m;

}

google.maps.event.addDomListener(window,"load",init);

$('#ver').text(google.maps.version);

</script>

別途、GoogleMapsAPIのライブラリを読み込む記述が必要です。ご自分が取得されたAPIキーを以下のコードの(YourAPIkey)部分に置き換えて設定してください。

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

1	<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=(YourAPIkey)&v=3"></script>

マーカーに旧Googleマイマップのアイコンを利用する ｜Google Maps API v3

Google マイマップアイコンについて

地図の表示

サンプルコード

HTML

CSS

JavaScript

マーカーに旧Googleマイマップのアイコンを利用する｜Google Maps API v3