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

ちょっと前回から間が空いてしまいましたが今回は画鋲みたいな
マーカーの追加(経度・緯度指定)とマーカーの削除(全部)を
やってみました。

任意に経度・緯度を入力して『マーカー追加』ボタンをクリックして下さい。
あまりに離れた経度・緯度を入力するとマップ外になるので御注意を。
小数点以下を変化させると良いかもしれないです。

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



        AddMarker();

    }



    //マーカー追加

    function AddMarker() {

        var Markerlatlng;



        var marker_num = marker_ary.length;

        Markerlatlng = new google.maps.LatLng(document.getElementById("Lat").value,document.getElementById("Lng").value,true)



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

            position: Markerlatlng,

            map: map

        });

    }



    function MarkerClear() {

        //マーカー削除

        for (i = 0; i <  marker_ary.length; i++) {

            marker_ary[i].setMap();

        }



        //配列削除

        for (i = 0; i <=  marker_ary.length; i++) {

            marker_ary.shift();

        }

    }



//]]>

</script>

</head>

<body onload="initialize()">

<div id="map_canvas" style="width: 800px; height: 600px"></div>

緯度:<input type="text" id="Lat" value="37"/><br />

経度:<input type="text" id="Lng" value="138"/><br />

<input type="button" value="マーカー追加" onclick="AddMarker()" />

<input type="button" value="マーカークリア" onclick="MarkerClear()" />

</body>

</html>



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

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

4.表示はこんな感じです。
sample17

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



目指せ15位以内励みになります。
どうか、両方ともポチっとしたいただければ嬉しいです。

パソコンサポート、パソコントラブルのことなら
札幌・北海道地域密着SK-Projectへ


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

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

コメント

第4の使徒

マーカーがエヴァの使徒に見えます。もうすぐ「破」が出るので楽しみにしています。
kaionさんのところは、梅と桜が同時きなんですね。これからが花シーズン。綺麗だろるな。

No title

ウ~ン、よく分からないけど、ま、いいか。
在宅のお仕事だと、スキルアップも自分でしないといけないから大変ですね。

楓(ぽち同盟)さんへ

エヴァの使徒ですか(笑)
関東圏に出現させますか(笑)
本当は桜が咲いてから、梅が咲くんですけど、天候不順で桜が
1週間くらい遅れたために同時になっちゃんたんですよ。

みっちょんさんへ

そうですね。
スキルアップはOJTで勝負に出るか、自分で日々勉強するしかないですね。
ただそれが仕事に上手く繋がるかが問題ですけど(^^;

マーカーが使えると便利ですよね。

マーカーしてもらった緯度・経度情報をDBに取り込んだら面白い事が出来そうですね。
場所付きtwitterみたく、1行コメントをフォームに入れ込んで、POSTした時に日時付きでDB管理すると良いですね、皆でつくる美味しい食堂一覧とか出来そうです。
個人で使ってもどこに行ったかなんてのをまさにtwitter感覚で入力していくとこれまた面白そうです。
ところで、緯度・経度を手入力しないといけませんねぇ。
手をクリック位置で緯度・経度を取れればUIとしてうれしいのですけど。
如何でしょう。

かわじゅんさんへ

クリックした場所にマーカーを付けるのは次回に挑戦する予定です。楽しみに待っていて下さい(笑)
コメントの投稿
管理者にだけ表示を許可する