google.com提供(mapfiles)・Google謹製のマーカー画像

Google Maps APIなど向けにGoogleがあらかじめ用意してある画像アイコンから、
google.com/mapfiles/にて提供されている画像のURL指定し、
Google Maps APIで表示を行う例をご紹介します。

google.com/mapfiles

概要

1 地図の表示
2 google.com/mapfiles/提供・Google謹製のマーカー画像
3 JavaScript
4 参考

地図の表示

google.com/mapfiles/提供のマーカーアイコンを配置しています。

なお、ここでは影アイコンを別で表示していますが、
本来影アイコンは同じマーカーに対して設定して利用します。

以下で、影アイコンの利用方法をご紹介しています。

google.com/mapfiles/提供・Google謹製のマーカー画像

以下のアイコンが利用できます。

2017/01/13訂正
以下のURLが無効になってしまいました。
別のURLで同様の画像が提供されていましたので、URLを変更しました。

http://google.com/mapfiles/arrow.png

http://google.com/mapfiles/arrowshadow.png

JavaScript

上記で埋込表示しているソースは以下を利用しています。
URLを一括で抜きたい場合は以下の方が便利かもしれません。

<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(32.00000,134.00500),
			zoom : 14,
			mapTypeId : google.maps.MapTypeId.ROADMAP
		});

		var arrow = "http://maps.google.com/mapfiles/arrow.png";
		var shadow = "http://maps.google.com/mapfiles/arrowshadow.png";
		var arrow_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(32.00000,134.00000),
			icon: arrow
		});
		var shadow_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(32.00000,134.01000),
			icon: shadow
		});
	}

	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(32.00000,134.00500),

zoom : 14,

mapTypeId : google.maps.MapTypeId.ROADMAP

});

var arrow = "http://maps.google.com/mapfiles/arrow.png";

var shadow = "http://maps.google.com/mapfiles/arrowshadow.png";

var arrow_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(32.00000,134.00000),

icon: arrow

});

var shadow_marker = create_marker({

map: gmap_canvas,

position: new google.maps.LatLng(32.00000,134.01000),

icon: shadow

});

}

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>

参考

Google {maps}

旧URL一覧（以下はすべて無効）

http://google.com/mapfiles/arrow.png
http://google.com/mapfiles/arrowshadow.png