2018-12-16

Hello, WorldMap! ~GoogleMapAPIにふれたよ~

こんにちは。新卒3年目でインフラエンジニアのsawakです。
もう日付変わっていますが、12/15は古代ローマの暴帝ネロの誕生日だそうです。FGOじゃないよ
1世紀の人間の誕生日がちゃんと記録残ってるんでしょうか。

この記事は Shanon Advent Calendar 2018 の15日目の記事です。

私は旅行が趣味で、今年は3回海外旅行してしまったのでかなりの金欠です。
もやし料理が得意になるほどの金欠です。
それでも旅行がしたくて、愛用のロードバイクで自宅から安く行ける旅行先を模索して
Googleマップと数時間にらめっこしている時もあります。

ということで今回はGoogleMapのAPIで少しだけ遊んでみたいと思います。

GoogleMap、APIが使えます。
そのほかGoogleの様々な機能のAPIが200種類以上公開されています。
Google翻訳とかカスタム検索とかYoutube関連とか使ったら面白そうです。

Googleアカウントを持っていれば、利用開始まではかなりサクサクです。
https://cloud.google.com/maps-platform/

画面に従って、
使いたい機能を選択(例えばMapsなら、地図・ストリートビューなど関連APIが一括有効化される)->
GCPのプロジェクトを作成->
請求情報の登録(300ドルの無料枠がありますが、後で請求アラートやAPIコール制限を設定しておきましょう)
ここまでするとAPIキーが発行されるので、

<!DOCTYPE html>
 <html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <p>Hello, Worldmap!</p>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 35.643925, lng: 139.743576},
          zoom: 18
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_APIKEY&callback=initMap"
    async defer></script>
  </body>
 </html>

↑のように呼び出します。
(APIはGoogleだけどWebサーバはAWSだよゴメンネ)


弊社が表示されます。
ってどれなんだ。。例の赤いピンは立たないのか。。。
調べたところちゃんと出せました。(カスタムピンも作れるようです)
scriptをちょいとこうして、、、

    <script>
      var map;
      var marker;
      var myLatLng = {
        lat: 35.643925,
        lng: 139.743576
      };
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: myLatLng,
          zoom: 18
        });
        marker = new google.maps.Marker({
          position: myLatLng,
          map: map,
          title: 'Hello my pin!'
        });
      }
    </script>

こうじゃ!
centerで座標を指定し、zoomでズームレベルを指定します。
見たところ0~22までで、大きいほど拡大します。
1つの建物を指定するなら17~19くらいがよさそうです。
任意の地点の地図をとりあえず出す、ということは簡単に出来そうですね。

使ったAPIキーですが、発行直後は全然制限がかかっていませんので、
ドメイン、IPなどで制限をかけておきましょう。

もう少し遊びたかったですが、今日はこのくらいにさせていただきます。
応用として、
「一連の事件は、全てこの場所から5km地点で起きていたんです!」的な遊びが出来そうかなと思います。
数学的に、座標を3つ渡すと一意な円が描けた気がするので、その中心を求める感じです。
難事件の解決に一役買ってくれるはずです。

逆に自宅を中心として、任意の半径の同心円を描ければ、
例えば「片道10kmで行ける場所」のマップが出来るので、サイクリングコースの選定に役立ちそうです。それやればよかった。。

それでは、残り2週間となった2018年、健康にお過ごしください。

sawak

0 件のコメント:

コメントを投稿