◆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
//-----------マーカ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);
});
関連記事一覧
スポンサードリンク
Leave a Comment