スポンサードリンク

Tag Archives: icon

地図をクリックして、マーカー（アイコン）を追加／全てのマーカー（アイコン）を一括で削除する方法

Posted by 管理人 on 2013年9月14日 3 comments | 2,448 views

1.地図をクリックして、マーカー（アイコン）を追加する方法

ポイントは、次の通り

1-1.グローバル変数に、var markersArray = [];を指定

1-2.マップをクリックしたらマーカー追加のイベントを記述

google.maps.event.addListener(map, ‘click’, function(event)
{
marker = createMarker(event.latLng);
markersArray.push(marker);
});

関数function createMarker(latlng)へ渡す

 

2.全てのマーカー（アイコン）を一括で削除する方法

2-1.リセットボタンを設置

<div><a href=”#” onclick=”clearMap();return false;”>リセット</a>

2-2.関数clearMap() の設置／配列を空に

function clearMap()
{
for (var i = 0; i < markersArray.length; i++ )
{
markersArray[i].setMap(null);
}
markersArray = [];
}

Read more »

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

Posted by 管理人 on 2011年2月1日 None comments | 39,071 views

◆ 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
});

Read more »

スポンサードリンク