マーカーアイコンを画像のURLで指定する｜Google Maps API v3

Google Maps APIでマーカー（ピン）に対して表示する画像を指定する際に、
その画像の指定方法によってできることに違いが出てきます。
ここでは一般に大きすぎる画像をURL指定した場合の表示例をご紹介します。

概要

1 マーカーアイコンを画像のURLで指定する｜Google Maps API v3
- 1.1 Google Maps API v3 表示例
2 サンプルコード

マーカーアイコンを画像のURLで指定する｜Google Maps API v3

Google Maps APIでマーカーに対して画像を表示する際に利用されるのが、
以下のように、マーカーインスタンスの生成時に、
オプションとしてURLを直接渡す方法です。

この方法で画像を指定した場合、
直接URLを指定しているだけですので、
本来は適切な画像サイズのデータを用意する必要があります。

ここでは以下の画像（大きすぎる）を利用しています。
幅・高さは、それぞれ200pxになっています。

icon_200px

http://gmap.pw/images/googlemymap/icon_200px.png

Google Maps API v3 表示例

実際、このままのソースでアイコンを画像指定するには、
適切なサイズの画像を準備する必要があります。

全体で200px幅の画像の1/4（50px)くらいのサイズであれば、
丁度良さそうなサイズになりそうであることが分かります。

ただ、スプライト（画像の一部を切り出して表示する）表示の方法を使う場合、
このままの画像でも「1/4（50px)」サイズだけ、
上記から切り出して使う事も可能です。

この方法については、以下でご紹介しています。

縮小表示も、切り出し表示も自在に行えます。

マーカーアイコンを画像URLにオプションを付けて指定（google.maps.Icon）｜Google Maps API v3

マーカーアイコンをgoogle.maps.MarkerImageで指定して表示する｜Google Maps API v3

サンプルコード

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を利用して表示します。

JavaScript

以下のJavaScriptを利用し、上記の画像をマーカーに対して設定します。
まさにそのまま表示されます。

<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 imgurl = "http://gmap.pw/images/googlemymap/icon_200px.png";
		var def_marker = create_marker({
			map: gmap_canvas,
			position: new google.maps.LatLng(34.839450, 134.693903),
			icon: 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 imgurl = "http://gmap.pw/images/googlemymap/icon_200px.png";

var def_marker = create_marker({

map: gmap_canvas,

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

icon: 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>

当サイトにお越しいただきありがとうございます。
当サイトは管理人アルゴリズンが個人で作成を行っているものです。
Google Inc.様とは一切関係はありません。

当サイト内のコンテンツの引用・出典の明記なきものは、
すべて管理人アルゴリズンが著作権を保持するオリジナルコンテンツです。
当サイトでご紹介しております写真等がある場合にも著作権の放棄は致しません。

申し訳ございませんが、無断転載、複製をお断りさせて頂いております。
尚、サイト内コンテンツを引用される際にはご連絡は不要です。
ただし、出典元として当サイト(個別URL)へのリンクをお願いいたします。

コンテンツを有益であると感じていただけましたら非常に光栄です。
ありがとうございます。

記事の作成依頼・更新依頼・削除要請などのご意見ご要望は、
まず、Twitter等よりメンションまたは、メッセージでご連絡を頂けますと幸いです。
@algorhythnn｜Twitter
algorhythnn｜Google+
algorhythnn｜Facebook

運営者はSNS等で個人名等の公開は行わないポリシーで運営しております。
直接のご連絡・取材時などには個人名・屋号でご連絡を差し上げる場合もございますが、
個人名・屋号等をインターネット上で公開されることはご遠慮願います。