もう日付変わっていますが、12/15は古代ローマの暴帝ネロの誕生日だそうです。
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 件のコメント:
コメントを投稿