WordPressにGoogle Maps API V3！

◆ 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　複数アイコン（マーカー）表示サンプル

• 上記サンプル4を使った地図

• 関連記事
  • ドラッグ＆ドロップマウスで移動可能なマーカ（アイコン）の指定方法
  • スライドして移動可能にする。google.maps.MarkerのraiseOnDragの指定方法

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク