Google Maps API(Google Maps Embed API)を使ってみる
Google Maps APIというもので簡単にGoogle Mapを表示できるらしいからやってみた!
今回は「Google Maps Embed API」を使って表示してみる。
JavaScriptを使う「Google Maps JavaScript API」もあるらしい。
4つのモード
Google Maps を表示するときは4つモードがある
- Placeモード
- Directionsモード
- Searchモード
- Viewモード
Placeモード
ある位置にピンを指すことができる
Directionsモード
2か所以上のルート、距離などを表示することができる
Searchモード
表示可能なマップに検索結果を表示する
Viewモード
ピンやルートが表示されていないマップを表示することができる
Googleマップを表示してみる
表示を行うまでの順序は以下の通り
- APIキーの取得
- HTMLで埋め込む
1.APIキーの取得
- Google API Consoleにアクセス
- 新規プロジェクトを作成するか、既存プロジェクトを選択する
- 「続行1をクリック
- 使用するAPIを「Google Maps Embed API」を選択する
- 「必要な認証情報」をクリック
- APIキーが表示される
2.HTMLで埋め込む
今回は「Placeモード」でさいたまスーパーアリーナにピンを指して表示してみた
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>GoogleMapsAPIテスト</title> </head> <body> <h1>GoogleMapsAPIを使ってみた</h1> <iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=取得したAPIキー &q=埼玉県さいたま市中央区新都心8" allowfullscreen> </iframe> </body> </html>
すごい簡単に表示できた!!
参考文献
Google Maps Embed API | Google Maps Embed API | Google Developers