スポンサードリンク

マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する/Google Maps API V3 (new google.maps.Marker / new google.maps.MarkerImage)

◆ Google Maps API v3 マーカー(アイコン)の種類、画像、サイズ、位置、影を変更する

V3グーグルマップのアイコン(マーカー)の種類を変更するには、いくつかのscriptの書き方があるようです。

まあ用途で使い分ければいいと思いますが・・・・

<サンプル1>

もっとも良く見かける基本のscriptです。単一のマーカー用のイメージ画像とシャドウ(影)を指定しています。

var icon = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var shadow = new google.maps.MarkerImage(
'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png',
new google.maps.Size(34,34),
new google.maps.Point(0,0),
new google.maps.Point(37,34)
);

var marker = new google.maps.Marker(
{
draggable: true,
raiseOnDrag: false,
icon: icon,
shadow: shadow,
//shape: shape,
map: map,
position: point
});

<サンプル2>

たくさんの種類のマーカー(アイコン)を使いたい場合は、こっちほうが記述が少なくてすみます。上のサンプル1とは機能的には、何もかわりません。

	var iconOffset = new google.maps.Point(34, 34);
	var iconPosition = new google.maps.Point(0, 0);
	var iconSize = new google.maps.Size(34, 34);
	var iconShadowSize = new google.maps.Size(37, 34);

	var iconUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png";
	var iconShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png";

	var icon = new google.maps.MarkerImage(iconUrl, iconSize, iconPosition, iconOffset);
	var Shadow = new google.maps.MarkerImage(iconShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var marker = new google.maps.Marker(
	{
	draggable: true,
	raiseOnDrag: false,
	icon: icon,
	shadow: shadow,
	//shape: shape,
	map: map,
	position: point
	});

<サンプル3>

通常は、複数種類のアイコンを地図に表示すると思います。その場合はコレ。

変数categoryに、公園(kouen)または温泉(onsen)を指定して、アイコンイメージと影等を呼び出します。


//共通
var iconOffset = new google.maps.Point(34, 34);
var iconPosition = new google.maps.Point(0, 0);
var iconSize = new google.maps.Size(34, 34);
var iconShadowSize = new google.maps.Size(37, 34);

//公園アイコン
var kouenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.png";
var kouenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png";
var kouenIcon = new google.maps.MarkerImage(kouenUrl, iconSize, iconPosition, iconOffset);
var kouenShadow = new google.maps.MarkerImage(kouenShadowUrl, iconShadowSize, iconPosition, iconOffset);

//温泉アイコン
var onsenUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png";
var onsenShadowUrl = "http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png";
var onsenIcon = new google.maps.MarkerImage(onsenUrl, iconSize, iconPosition, iconOffset);
var onsenShadow = new google.maps.MarkerImage(onsenShadowUrl, iconShadowSize, iconPosition, iconOffset);

	var customIcons =
	{
		kouen:
		{
		icon:kouenIcon,
		shadow:kouenShadow
		},
		onsen:
		{
		icon:onsenIcon,
		shadow:onsenShadow
 		},
	};

	var icon = customIcons[category] || {};				

	var marker = new google.maps.Marker(
	{
	map: map,
        position: latlng,
	icon: icon.icon,
	shadow: icon.shadow,
	title: name,
	animation: google.maps.Animation.DROP
            	 });


<サンプル4>

上記サンプル3をシンプルに、多少影の位置がずれますが、気にしなければ

	var customIcons =
	{
		kouen:
		{
		icon: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.png',
		shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png'
		},
		onsen:
		{
		icon: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.png',
		shadow: 'http://maps.google.co.jp/mapfiles/ms/icons/hotsprings.shadow.png'
 		},
	};

          var icon = customIcons[category] || {};

             var marker = new google.maps.Marker({
             map: map,
             position: latlng,
             icon: icon.icon,
             shadow: icon.shadow,
             title: name
             });

◆Google Maps JavaScript API V3 複数アイコン(マーカー)表示サンプル

◆Google Maps JavaScript API V3


スポンサードリンク

Related Posts

Leave a Comment


NOTE - You can use these HTML tags and attributes:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <img localsrc="" alt="">