#11:Googleマップを表示しよう
ここでは、ランチマップに住所に合わせた地図を表示します。そのために、このアプリケーションにGoogleマップを組み込みます。
APIとは、Application Programming Interfaceの略で、プログラムから別のプログラムの機能を呼び出すために用意された命令や関数のこと。
- Google Maps Platform - Geo-location API
https://cloud.google.com/maps-platform/
- Developer Guide | Maps Embed API | Google Developers
https://developers.google.com/maps/documentation/embed/guide
1. Google Developers Consoleにアクセスする
Google Developers Console
https://console.developers.google.com/
2. プロジェクトを作成を選択
3. Google APIが表示されたら、Google Maps APIから「Google Maps Embed API」を選択
4. 「有効にする」をクリック
5. 「認証情報を作成」をクリックして、「必要な認証情報」ボタンをクリック
6. 表示されたAPIキーを記録する
※特定のWebサービスだけから利用できるよう、「API利用制限」を設定することをお勧めします。
※この手順や利用範囲はGoogle側で変更される場合があります。
myapp/lunchmap/templates/lunchmap/shop_detail.html<iframe id='map'
src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCJBgcuCowQa5-V8owXaUCHhUNBN8bfMfU&q={{ shop.address }}'
width='100%'
height='320'
frameborder='0'>
</iframe>
- Google Maps Embed APIの使い方まとめ!カスタム地図を埋め込もう
https://syncer.jp/google-maps-embed-api-matome