WordPressにGoogle Maps API V3！

◆Google Maps API V3 のドラッグ・アンド・ドロップを可能にするマーカ（アイコン）の変更

遊び半分で、マーカー（アイコン）をマウスで移動できるようにするのは、どうでしょうか。ルート検索以外に使い道は無いものか・・・・。

まあ、何かに使えるかも。

マーカー（アイコン）をドラッグ＆ドロップで移動できるようにするのは、非常に簡単。

Google Maps API V3でアイコン（マーカー）を移動可能にするのは、とても簡単。マーカーの指定で  draggable: trueとするだけ。

なお、アイコンを持ち上げずにスライドさせるのであれば、コチラ

◆Script

//－－－－－－－－－－－マーカ1－－－－－－－－－－－－－

var marker1 = new google.maps.LatLng(35.71634, 139.51701);　//★マーカ位置

var contentString1 =

‘小金井公園 ‘+

‘<p><a href=”http://waox.main.jp/news/?page_id=1013″ target=”_blank”>Google Maps API V3 ページ</a></p>';   　//★インフォウィンドウ記述

var infowindow1 = new google.maps.InfoWindow({

content: contentString1

});

var image1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.png’,　//★マーカ種類

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow1 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/tree.shadow.png’,　　//★マーカ影

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker1 = new google.maps.Marker({　　//★マーカ追加

position: marker1,

map: map,

title: “小金井公園”,

icon: image1,

shadow: shadow1,

draggable: true //★マーカ移動可否

});

google.maps.event.addListener(marker1, ‘click’, function() {　　//★クリックアクション

infowindow1.open(map, marker1);

});

//－－－－－－－－－－－マーカ2－－－－－－－－－－－－－

var marker2 = new google.maps.LatLng(35.68135, 139.76571);

var contentString2 =

‘東京駅 ‘+

‘<p><a href=”http://waox.main.jp/news/” target=”_blank”>ブログトップページ</a></p>';

var infowindow2 = new google.maps.InfoWindow({

content: contentString2

});

var image2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));

var shadow2 = new google.maps.MarkerImage(‘http://maps.google.co.jp/mapfiles/ms/icons/rail.shadow.png’,

new google.maps.Size(64, 64),

new google.maps.Point(0,0),

new google.maps.Point(0, 32));;

var marker2 = new google.maps.Marker({

position: marker2,

map: map,

title: “東京駅”,

icon: image2,

shadow: shadow2,

draggable: true

});

google.maps.event.addListener(marker2, ‘click’, function() {

infowindow2.open(map, marker2);

});

◆Google Maps JavaScript API V3　サンプル

• 移動が可能なアイコン（マーカー）表示

◆Google Maps JavaScript API V3

• Google Maps API v3 目次に戻る

スポンサードリンク