2018-05-20T03:09:48Z

GoogleMapsAPIで遊んでみる

GoogleMapsAPIのチュートリアルで遊びつつ覚えてしまう。

マップを表示してマーカーをだす

...
    <div id="map" style="width:100%; height:400px;"></div>
    <script>
      function initMap() {
        var uluru = {lat: 35.278387, lng: 136.872909};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 18,
          center: uluru
        });
        var marker = new google.maps.Marker({
          position: uluru,
          map: map
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap">
    </script>
...

ご近所の岩倉駅前にマーカを設置してみました。
10分ぐらいでこのぐらいのことができました。こんなに簡単ならもっと早く勉強しとくべきだった。

手順(やったこと)

  • マーカーが配置された Google マップをウェブサイトに追加するを読む
  • キー取得でAPI用のキーを取得
  • サンプルをローカルファイルに保存する
  • {YOUR_API_KEY}を取得したAPIキーに置き換える
  • ローカルファイルをブラウザで開くとサンプルが動作する
  • GoogleMapでマーカを表示する
  • GoogleMapで緯度/経度/ズーム値を取得する
    • URLに/@緯度,経度,ズーム値z/の形式で記載されている
  • ローカルファイルを書き換えてブラウザで開いて完了

ストリートビューも表示する

...
    <div id="street-view" style="width:100%; height:400px;"></div>
    <script>
      var panorama;
      function initialize() {
        panorama = new google.maps.StreetViewPanorama(
            document.getElementById('street-view'),
            {
              position: {lat: 35.2783857, lng: 136.87307},
              pov: {heading: 267.57, pitch: 25},
              zoom: 1
            });
      }
    </script>
    <script async defer
         src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initialize">
    </script>
...
 コメントを書く