GoogleMapsAPIで遊んでみる

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

For development purposes only

2018年07月16日からGoogle Maps Platformの新サービスが始まり、APIキーなしのGoogleMapsの使用が制限されるようになりました。それにより、For development purposes onlyを表示するようになりました。

APIキーを付加している場合は、表示されていませんでした。ですが、どうやらいつのまにかAPIキーありでも表示されるようになったようです。

これからは、GoogleMapsを使用するためにクレジットカードの登録が必要となるようです。

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

GoogleMaps...

<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 src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initMap"></script>

...

ご近所の岩倉駅前にマーカを設置してみました。

手順（やったこと）

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

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

StreetView...

<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 src="https://maps.googleapis.com/maps/api/js?key={YOUR_API_KEY}&callback=initialize"></script>

...

GoogleMapの埋め込み

---

埋め込みで事足りるなら、埋め込みのほうが面倒事がないかも。