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

今回は前回作成した「Google Maps API Ver.3:マーカーの追加と削除2」が正常に動作しなかったので修正したものを再アップしました。

動作
マップの任意の位置を左クリックするとマーカーが表示され、マーカーの上にマウスカーソルを持っていくと経度・緯度が表示され、マーカーを右クリックすると削除される様にしました。

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();


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) {
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 ( !!infowindow_obj[marker_num]) {
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 ( 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], 'position_changed', function() {
var markertext;
var LatLng;

LatLng = marker_ary[marker_num].getPosition();
markertext = "緯度:" + LatLng.lat() + "<br>" + "経度:" + LatLng.lng();
infowindow_obj[marker_num].setContent( markertext);
});
});

}

//]]>
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 800px; height: 600px"></div>
</body>
</html>



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

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

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



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


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

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

コメント

また始まりましたねぇ。

気温も下がり、心地よい季節となりましたね。
というわけでと言う事では無いのでしょうけど、Google Mapシリーズの再開ですね。

ところで開発はWindowsなのでしょうか?
と言うのは今まで言及して来なかったのですが、Macの人はどうするのかなぁ?って。。
新しめのMacならちゃんと副ボタンの設定をしてたり、古いMacならモディファイアキーを押しながらクリックという技が必要ですよね。
でもいiPadとかiPhoneだったらどうするんだろってふと思ってしまいました。
結構地図を見ながら、マーキングするってシチュエーションはニーズが多いのでは無いでしょうか。
特にキーボードが付いたPCでは無く、iPadとかiPhone(スマホも含むんですが)の活躍の場所って多いのでは?って思います。
UIとしてPC用途なら右クリックもありなんですけど、キーボードレスの端末ではAPI的にどうなんですかねぇ。

ちなみに、マークした所にコメントを入れられるとうれしいかも。

かわじゅんさんへ

開発はWidowsでやってます。
Macに接続されているマウスも2ボタンなので開発は面倒じゃないんですけど、なぜかWIndowsでやっています(笑)
コメントを自由に入れるですか…考えてみますね。
コメントの投稿
管理者にだけ表示を許可する