Google Maps API Ver.3:マーカーの追加と削除4

今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除3」からイベントを操作出来る様に変更しました。

マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。
ボタンをクリックするたびに左クリック、右クリック、onMouseが反転制御出来ます。

1.まずはサンプルソース(下記)をエディタ(任意)にコピーしましょう。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps API3 Sample</title>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
var EventListener;
var marker_ary = new Array();
var infowindow_obj = new Array();
var map;
var rightclick = true;
var onmouse = true;
var click = true;


function initialize() {
var latlng = new google.maps.LatLng(37, 138, true);
myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDoubleClickZoom: true,
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

google.maps.event.addListener(map, "click", function(clickev) {
if ( click == false) return;

var x = clickev.latLng.lat();
var y = clickev.latLng.lng();

var marker_num = marker_ary.length;
var Markerlatlng = new google.maps.LatLng(x, y);

for (i = 0; i < marker_num ; i++) {
if (!!marker_ary[i]) {
if ( (Markerlatlng.lat() == marker_ary[i].position.lat()) && (Markerlatlng.lng() == marker_ary[i].position.lng())) {
return;
}
}
}


marker_ary[marker_num] = new google.maps.Marker({
position: Markerlatlng,
map: map,
clickable: true,
draggable:true
});

google.maps.event.addListener(marker_ary[marker_num], 'mouseover', function() {
var markertext;
var LatLng;

if ( onmouse == false) return;

LatLng = marker_ary[marker_num].getPosition();

markertext = "緯度:" + LatLng.lat() + "<br>" + "経度:" + LatLng.lng();
infowindow_obj[marker_num] = new google.maps.InfoWindow({content: markertext,position:LatLng});
infowindow_obj[marker_num].open(map, marker_ary[marker_num]);
//infowindow[marker_num] = true;

google.maps.event.addListener(infowindow_obj[marker_num], 'closeclick', function() {
//infowindow[marker_num] = false;
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
delete infowindow_obj[marker_num];
});
});

google.maps.event.addListener(marker_ary[marker_num], 'rightclick', function() {
if ( rightclick == false) return;

if ( infowindow_obj[marker_num]) {
infowindow_obj[marker_num].close(map, marker_ary[marker_num]);
}
marker_ary[marker_num].setMap();
delete marker_ary[marker_num];
});

google.maps.event.addListener(marker_ary[marker_num], 'mouseout', function() {
infowindow_obj[marker_num].close();
});
});

}


function DeleteLeftClick() {
click = click ^ true;
if ( click) {
form.click.value = "左クリック禁止";
} else {
form.click.value = "左クリック許可";
}
}


function DeleteRightClick() {
rightclick = rightclick ^ true;
if ( rightclick) {
form.rightclick.value = "右クリック禁止";
} else {
form.rightclick.value = "右クリック許可";
}
}

function DeleteOnMouse() {
onmouse = onmouse ^ true;
if ( onmouse) {
form.onmouse.value = "on MOUSE 非表示";
} else {
form.onmouse.value = "on MOUSE 表示";
}
}

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
<form name="form">
<input type="button" name="click" value="左クリック禁止" onclick="DeleteLeftClick()" />
<input type="button" name="rightclick" value="右クリック禁止" onclick="DeleteRightClick()" />
<input type="button" name="onmouse" value="on MOUSE 非表示" onclick="DeleteOnMouse()" />
</form>
</body>
</html>



2.エディターで作成したサンプルソースはutf-8エンコードで保存し
 FTP(FFFTPなど)で『Google Maps API Ver.3:登録』時に入力した
『使用する Web サイトのURL』へサンプルソースをアップして下さい。

3.アップしたサンプルソースのURLをブラウザから指定したら地図が
 表示されるはずです。
 
 因みに私の実働するサンプルURLはここです。

にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。
パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


メンタルヘルス ブログランキング へ にほんブログ村 メンタルヘルスブログ うつ病(鬱病)へ
プログを書く励みになります。
どうか、ポチっとしたいただければ嬉しいです。

テーマ : Google関連 - ジャンル : コンピュータ

コメント
コメントの投稿
管理者にだけ表示を許可する