GoogleMaps JavaScript API v3を使ったGoogle Mapの表示 レスポンシブ対応

Google Maps JavaScript API v3を使って、Google Mapsを表示させます。
Webブラウザで確認済みですが、ios7で表示がされないようです...何故。。

全体の流れ
- API キーの取得
- 地図の表示
- ピン刺し
- レスポンシブ
- display:noneからの表示

API キーの取得

APIのリクエスト数などが分かるので、設定してもよいかもしれません。
取得しなくても地図は表示されますので、簡単に紹介します。
（詳しく知りたい方は、参考にさせて頂いたサイトに掲載されていますので、そちらからお願いします）

まず、Googleアカウントが必要になりますので、持っていなければ作成します。
アカウントにログインした状態で、Google Developers Consoleにアクセスします。

Google Developers Console
https://goo.gl/oPjEOY

プロジェクトを作成

1.プロジェクトを新しく作成して、適切な名前をつけます。
2.「GoogleAPIを使用する」をクリックします。
3.Google Maps JavaScript APIを使用しますので、Google Maps JavaScript APIをクリックします。
4.有効にして、認証情報へと進みます。
5.必要な認証情報の種類、APIを呼び出す場所を設定を選択し、必要な認証情報をクリックします。

その後、APIを利用するウェブサイトのURLを入力し、認証情報を取得します。
キーが取得されました。

地図の表示

html、CSS、Javascriptを書いていきます。

html

<div class="map-wrapper">
    <div id="map-canvas">
<!-- ここに地図が表示されます -->
    </div>
</div>

CSS

/*幅と高さがないと表示されません*/
#map-canvas{
     width: 500px;
     height: 250px;
     margin: 0 auto;
}

Javascript

ライブラリーの読み込み

ライブラリとなるJavaScriptファイルを読み込みます。
<script src="https://maps.googleapis.com/maps/api/js?key=APIキー"></script>

APIキーを取得していない場合は以下
<scriptsrc="https://maps.googleapis.com/maps/api/js"></script>

....maps/api/js?sensor=false">というsensor=falseの記述はChrome(2016/01/19現在）のconsole.logで確認すると警告がでます。
記述しても地図は表示されるので特に問題ないかもしれませんが、念のため?sensor=falseは削除しておきます。

地図の表示

先ほど読み込んだライブラリーよりも下に、javascriptのコードを加えていきます。

・地図を挿入したい要素を取得
・中心の位置座標、ズーム値などのオプションを設定
・地図のインスタンスを作成

という流れです。

// 地図を挿入したい要素を取得
var canvas = document.getElementById( 'map-canvas' ) ;

// 中心の位置座標を指定
var latlng = new google.maps.LatLng(  35.681382 ,  139.766084 ); //適当に東京駅の緯度経度にしました

// 地図のオプションを設定する
var mapOptions = {
    zoom: 14,// ズーム値 
    center: latlng, // 中心座標 [latlng] 
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
}; 

// [canvas]に、[mapOptions]の内容の、地図のインスタンス([map])を作成する
var map = new google.maps.Map( canvas , mapOptions ) ;

35.681382 , 139.766084には、地図上で中心にしたい場所の緯度と経度を入れてください。
緯度と経度を調べるには、
http://www.geocoding.jp/
を使うと便利とのことです。

GoogleMap上で緯度・経度を求めたい場所（ピンの場所）を右クリックして「この場所について」を選択しても表示されますが、ピンを刺さなくても地図上をクリックすれば表示されるようです。

ピン刺し

インスタンス作成のコードの後に、以下のコードを記載します。

  var marker = new google.maps.Marker({
    map: map,//先ほど作った、地図のインスタンス([map]) を設定
    position: latlng//ピンを刺す場所 今回、ピンを挿す位置と地図の中心を同じにしています。
  });

これでひとまずピンの刺さった地図が表示されました！

レスポンシブ対応

CSSにコードを追加

/*ブレークポイント 640oxよりも小さい幅*/
@media only screen and (max-width:  640px) { 
  #map-canvas {
      width: 50%;
    height: auto;
  }
}

地図の中心を追従させる

これまでの過程でも表示領域はレスポンシブされますが、このままでは地図の中心がどんどん外れていきます。
そこでウィンドウをリサイズしたときに、再度読み込むようにします。

//ウィンドウをリサイズしたら再度読み込み
google.maps.event.addDomListener(window, 'resize', function(){
  map.panTo(latlng);//地図のインスタンス([map]) 
});

display:noneからの表示

最初は非表示になっていて、タブをクリックすると表示される
というようなdisplay:noneからdisplay:blockに切替えている場合、タブを開いた際に地図が表示されません。

「ウィンドウをリサイズしたら再度読み込み」をしているので、ウィンドウのサイズを変更すれば表示はされますが、それでは意味がありません。

なのでタブをクリックした際に、地図を再読み込みさせます。

$(".tab").click(function(){
    google.maps.event.trigger(map,'resize');
    map.setCenter(latlng);
});

参考

iPhone/AndroidでGoogle Mapアプリを起動する方法
Google Maps JavaScript API v3の使い方まとめ (サンプルコード付き)
Google Map をレスポンシブ対応に
Google Mapsで地図用コンテナを非表示にして地図を初期化すると表示がおかしい
display:none;でGoogle Mapがずれないようにする！