○本日の目標

Google Map APIを用いて、Google Mapの地図上にマーカーを表示する

JSON形式によるデータの表現方法を学ぶ
データ収集から表現形式までの効率的な方法を考える

○必要なもの

ブラウザ（FireFoxを推奨）

テキストエディタ（秀丸、mi等）

Developer toolでわかることの例：

プログラムの何行目にエラーがあるのか→セミコロン、括弧の打ち忘れが見つかることが多い。
どの変数、関数が定義されていないか→たいていは名前の書き間違い
console.log関数を使って変数の値をチェック→プログラムの注目する部分（例えばループの中）が実行されているかわかる。alert関数も同様。

○HTMLでWebページの構造を作る

        <!DOCTYPE html>
        <meta charset="utf-8"/>
        <html>
          <head>
          
            <script></script>
            <script></script>   →次へ
          
            <style>
              #map {width:500px; height:380px; border:1px solid #666; float:left;}
            </style>
          </head>
          <body>
            <div id="map"></div>
          </body>
        </html>

○Javascriptで地図を表示する

        <head>
          <script type="text/javascript"
          src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
          
          <script>
                次へ
          </script>
          
          <style>
            #map {width:500px; height:380px; border:1px solid #666; float:left;}
            </style>
        </head>

        ↓
        <script>
          var c_lat,c_lng;
            var map;

            c_lat = 35.1814;
            c_lng = 136.9064;
            window.onload = function() {
              draw_map(c_lat,c_lng);
            }
            function draw_map(lat,lng) {
              var op = {
                zoom:13,
                center:new google.maps.LatLng(lat,lng),
                mapTypeId:google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById("map"),op);
            }
          </script>

◯次のリンク先のページのソースをよく読み、不必要なコードを消去して、次の課題をおこないなさい。

サンプルページ

課題１地図だけ表示する。さらに、地図の中心を変えて表示してみる。

○地図上にマーカーを置く

        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ja"></script>
        <script>
          var c_lat,c_lng,t_lat,t_lng;
          var map;
          var marker;

          c_lat = 35.1814;
          c_lng = 136.9064;

          t_lat = 35.1584;
          t_lng = 136.9217;
          
          window.onload = function() {
            draw_map(c_lat,c_lng);
            placeMarker(map,t_lat,t_lng);
          }

          function draw_map(lat,lng) {…}
          function placeMarker(map,lat,lng) {…}
        </script>

        function placeMarker(map,lat,lng) {
          var latLng = new google.maps.LatLng(lat,lng);
          var label = "Nagoya University Hospital";
          marker = new google.maps.Marker({
            position:latLng, map:map, title:label
          });
        }

課題２　地図上のどこかにマーカーを表示する。中心とマーカーの場所を変えてみる。

○マーカーのその他のプロパティの例

・icon

マーカーアイコンを変更するために用いる

マーカーアイコンの種類を変更するためにさらにiconのプロパティを用いる

○Javascriptを構成するもの

オブジェクト（object）

変数（variable）

演算子（operator）

式（expression）
文（statement）

関数（function）

○Javascriptプログラムを書くために

必要な定数、変数を先に定義しておく
window.onloadプロパティに、Webページを表示し終わった後の動作を記述する

プログラムを関数に分けて書くと、読みやすい
変数は、varをつけて定義すれば、スコープは関数の中だけ。
つけなければ、プログラム全体

まとめ

Google Map APIを使うには①

まずHTMLでページの構造を作る

要素のid属性と、スタイルの定義が必要

"head"要素の中の"script"要素に、地図を描くためのJavascriptプログラムを書く

- 別の"script"要素に、Google Maps APIのプログラム本体（ライブラリ）が置いてある場所のURLを書く必要がある

まず地図を描く。その上にマーカーを置く

地図は、google.maps.Mapで描く

google.maps.Mapは地図を乗せる要素とオプションを要求する

- 要素はdocument.getElementById(要素名)で与える
- オプションには、最低限zoom, center, mapTypeIdを

マーカーはgoogle.maps.Markerで作る

- position: google.maps.LatLng(緯度,経度)で定義されるオブジェクト
- map: 地図オブジェクト
- title: 文字列

マーカー情報をJSONで表現

      JSON: Javascript Object Notation

      {"hospital":[
        {"name":"Nagoya University Hospital",
         "lat":35.1584,"lng":136.9217},
        {"name":"Chukyo Hospital",
         "lat":35.1100,"lng":136.9020},
        {"name":"Nagoyadaiichi Red Cross Hospital",
         "lat":35.1718,"lng":136.8624}
      ]}
      これをUTF-8形式で保存
      ファイル名「hosp.json」

      ひとつのオブジェクトは、
      {"プロパティ１":"値１","プロパティ２":"値２",…,"プロパティN":"値N"}
      オブジェクトの配置は、
      [オブジェクト１,オブジェクト２,…,オブジェクトM]

課題３ JSONファイルの形式を確認する（ここ）。別の地域に変えて、いくつかの地点の名称、緯度、経度、URLを含むJSONファイルを作る。これは課題４と５でも使う。

JSON形式のファイルを読み込む

      <script type = 'text/javascript' src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
      </script>
      <script>
        var c_lat,c_lng,t_lat; … ;t_lng = 136.9217;
        var hosp_data;
        $.getJSON("hosp.json",function(data) {
          hosp_data = data;
        });
        window.onload = function() {
          draw_map(c_lat,c_lng);
          plot_sites(hosp_data);
        }

        function draw_map(lat,lng){…}
        function plot_sites {…} → 次へ
      </script>

    ↓複数のマーカーを表示する

      function plot_sites(data) {
        var len = data.hospital.length;
        for(var i=0; i<len; i=(i+1)) {
          var site = data.hospital[i];
          var lat = site.lat;
          var lng = site.lng;
          var name = site.name;
          var pos = new google.maps.LatLng(lat,lng);
          var marker_prop = {position:pos, map:map, title:name};
          var marker = new google.maps.Marker(marker_prop);
        }
      }

課題４　課題３で作ったJSONファイルを読み込ませ、地点のマーカーを表示する。

○JSONの目的

○JSONの特徴

テキストで書かれている

１つのオブジェクトは{}で囲まれている
1つのオブジェクトは、プロパティと値のペアを1つ以上含む

値の型はさまざまなものが可能
プロパティも値もダブルクォーテーション（"）で囲む

○JSON形式で構造をもつデータを表現できる

      {"pets":[
        {"id":"01","name":"pochi","species":"dog",
        "favorites":{"food":"meat","place":"garden"}},
        {"id":"02","name":"tama","species":"cat",
        "favorites":{"food":"tsuna","place":"kitchen"}},
      ]}

○マーカーに吹き出しをつける

・JSONファイル

        {"hospital":[
          {"name":"Nagoya University Hospital",
          "lat":35.1584,"lng":136.9217,"ward":"Showa",
          "url":"http://www.med.nagoya-u.ac.jp/hospital/"},
          {"name":"Chukyo Hospital",
          "lat":35.1100,"lng":136.9020,"ward":"Minami",
          "url":"http://chukyo.jcho.go.jp"},
          {"name":"Nagoyadaiichi Red Cross Hospital",
          "lat":35.1718,"lng":136.8624,"ward":"Nakamura",
          "url":"http://www.nagoya-1st.jrc.or.jp/"}
        ]}

・Javascript

        function plot_sites(data) {
          var len = data.hospital.length;
          for(var i=0; i<len; i=(i+1)) {
            var site = data.hospital[i];
            var lat = site.lat;
            var lng = site.lng;
            var name = site.name;
            var url = site.url;
            var pos = new google.maps.LatLng(lat,lng);
            var marker_prop = {position:pos, map:map, title:name};
            var marker = new google.maps.Marker(marker_prop);
            marker = add_InfoWindow(marker,url);
          }
        }

○吹き出しのイベントドリブンな動作を定義する

        function add_InfoWindow(marker,url) {
          var infowindow = new google.maps.InfoWindow();
          google.maps.event.addListener(marker,'click',function() {
            infowindow.setContent(url);
            infowindow.open(map,marker);
          });
          google.maps.event.addListener(map,'click',function() {
            infowindow.close();
          });
          return marker;
        }

課題５　課題４のマーカーをクリックすると吹き出し（インフォウィンドウ）が表示されるようにする。

まとめ

Google Map APIを使うには②

JSON形式のファイルを読み込むには、
jQueryライブラリのgetJSONを使うと簡単である

吹き出しは、google.maps.InfoWindowで作る
吹き出しの出没は、マーカーや地図のイベント（クリック等）によって起動される

○地理データの取得

課題

住所を緯度・経度に変換する
より正確な微調整を行なう（例：○棟⇒◇棟）

↓
ツールを開発した
URL: http://hishikilab.sakura.ne.jp/project2013/adrs2pos_02.html

入力した住所を、緯度・経度に変換（google.maps.Geocoderを利用）
その場所を中心とする衛星写真を表示、そこにマーカーを立てる
マーカーを移動してボタンを押すと、新しい場所を書き出す
エクセルにコピー＆ペーストして記号で区切る

Google Map Api入門