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;

    marker_ary = 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);



            var markertext = "緯度:" + x + "\n" + "経度:" + y;

            marker_ary[marker_num] = new google.maps.Marker({

                position: Markerlatlng,

                map: map,

                clickable: true,

                title: markertext

            });



            google.maps.event.addListener(marker_ary[marker_num], 'rightclick', function() {

                marker_ary[marker_num].setMap();

            });

        });



    }



//]]>

</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関連 - ジャンル : コンピュータ

コメント

すばらしい。。

これは使えますよ。
ちなみにマークした座標はPOSTしたら取れるんですかね。
htmlを拝見したところ、JavaScriptで完結しているっぽいです。
これを n箇所分クッキーにセットして、POST時にDB登録しておくと良さげですね。
あと一行コメントのテキストエリアを設ければ、場所付twitterの出来上がりですね。
但し、以前のものを再表示する際は、予めクッキーを送りつけてJavaScriptがクッキーからマーカーを生成する処理が必要ですね。
う~んすばらしい。
twitter+として一般受けしそうな気がしますよ。

No title

かわじゅんさんとのやり取りがさっぱりわかりません(@_@;)。やっぱりプロの方は違うなぁ。
外国語を見てる感じ。ひょ~、ちんぷんかんぷんです。

No title

ひょえ~~~
まったく解りません。
さすがプロですね~
ぽち☆

???

何が何だか、分かりません(?_?)
頭が、クラクラしそうです(笑)

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