2-6:ドラッグ&ドロップできるマーカーを作る

「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 JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&v=2&key=[あなたのAPIキー]" type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    function load() {
      if (GBrowserIsCompatible()) {

        //地図を作成
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(35.677335,139.744613), 16);

        //マーカーを作成(国会議事堂)
        var marker = new GMarker(new GLatLng(35.676148,139.74479),{draggable: true});

        //マーカーを地図上に配置
        map.addOverlay(marker);
      }
    }

    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 500px"></div>
  </body>
</html>

 

サンプルプログラムの解説


ドラッグ&ドロップできるようにするコード、上のサンプルプログラムの赤枠で囲んだ部分です。
GMarker(point, opts(省略可))

   マーカーを作成する
  point:  クローズアップ表示するポイント
       (サンプルでは『new GLatLng(35.676148,139.74479)』の部分)

  opts: ここに「draggable: true」をセットすることでマーカーをドラッグ&ドロップすることができる。

 

 

ちょっとマーカーの属性を付け加えるだけで、簡単にマーカーをドラッグ&ドロップできるのです。
Google Mapsなんて簡単でしょ?!

ちなみに、これだけでは面白くないので、もう少し手を加えたサンプルを作ってみました。
詳細はここでは解説しませんが、参考にしてみてください。
ドラッグ中に線が表示されるサンプル







サイト内検索
Google Maps APIプログラミング入門 第2版
Google Maps APIプログラミング入門 第2版
全520ページ。Google Maps API version3を中心に公式ドキュメントより詳しく解説しています。
詳しくはこちら
Google Maps APIプログラミングガイド

Google Maps API Expert 4人が共著で執筆。中級者向けに実用に役立つサンプルを中心に紹介! スマートフォン時代に合わせたGoogle Maps APIの使い方も掲載。
詳しくはこちら