住所からGoogleMapを描画する（ジオコーディングAPIを利用）

0_readme.md

目的

• 住所を日本語で指定し、マップをjavaScriptAPIで描画する
• config内を（動的・静的問わず）書き換えることで、地図の柔軟なカスタマイズが可能
• iframe埋め込みでは実現できない動作や表示の細かい制御が可能

javaScriptAPIは、25,000/dayのリクエスト制限がある

仕様

• GoogleMapのジオコーディングAPIを使用
• APIを元に住所→緯度経度を取得
• 緯度経度からjavaScriptAPI（いわゆる普通の）地図描画を行う

ジオコーディングAPIは、2,500/dayのリクエスト制限がある

index.html

<script src="//maps.google.com/maps/api/js"></script>

<div id="gmap" class="map-area">
  <div class="map-area__note">ここに地図が表示されます</div>
</div>

map.js

(function() {

  var mapId    = document.getElementById('gmap'),
      geocoder = new google.maps.Geocoder(),
      config   = {
        address: '東京都品川区',  // 住所を表す文字列
        region: 'jp',  // 国コードのトップレベルドメインを表す文字列
        lat: null,  // 緯度
        lng: null,  // 経度
        mapOption: {
          zoom: 13,
          center: null,
          // 地図タイル（地形図:TERRAIN, 航空:SATELLITE, HYBRID:航空+道路）
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          // map action
          scrollwheel: false,  // ホイールでズーム
          disableDoubleClickZoom: true,  // ダブルクリックでズーム
          draggable: true,  // ドラッグで地図移動
          // map UI
          mapTypeControl: false, // 地図タイル
          zoomControl: false,  // 地図ズーム
          streetViewControl: false,  // ストリートビュー
          panControl: false,  // 地図の移動

          disableDefaultUI: false,
        }
      };


  /**
   * マップ描画
   * @param {id}  表示させたいタグのID
   * @param {obj} configデータ（詳細はconfig変数を参照）
   */
  var drawMap = function(id, args) {
    /**
     * 緯度経度をargsに格納する
     * 非同期処理なのでthen()で繋いで使用する
     * @return {obj} promiseを返す
     * ex) createLatLng.then(function(){  });
     */
    var createLatLng = function() {
      var dfd  = $.Deferred();

      geocoder.geocode({
        'address': args.address,
        'region': args.region
      }, function(results, status) {

        // ガード節
        if (status !== google.maps.GeocoderStatus.OK) {
          dfd.reject();
          return;
        }

        args.lat = results[0].geometry.location.lat();  // 緯度
        args.lng = results[0].geometry.location.lng();  // 経度
        dfd.resolve();
      });
      return dfd.promise();
    };

    // 緯度経度の取得に失敗した時
    createLatLng().fail(function() {
      alert('Google Mapの読み込みに失敗しました。再読み込みをお試しください');
    });

    // 緯度経度の取得に成功した時
    createLatLng().done(function() {
      var map,
          marker;
      // mapの中心位置を格納
      args.mapOption.center = new google.maps.LatLng(args.lat, args.lng);
      // mapとマーカーの描画
      map = new google.maps.Map(id, args.mapOption);
      marker = new google.maps.Marker({
        position: args.mapOption.center,  // 表示位置
        map: map  // 表示させる地図
      });
    });
  };



  $(function() {

    google.maps.event.addDomListener(window, 'load', function () {
      drawMap(mapId, config);
    });
  });



})();