WebサイトにGoogleMapを埋め込みたいと思うことはよくありますよね。面倒そうと思う方もいるかと思いますが、実はiframeタイプのマップはAPIキー不要で使うことができます。
座標を指定して埋め込みます
埋め込みたい場所にこのようなコードを記載します。
q=35.630974,139.743718 の部分が緯度経度の指定部分です。(座標は適当です)
住所から座標点割り出せるサービスがあるので必要なら使ってみてもよさそうですね。
緯度：35.630974
経度：139.743718
|
1 2 3 |
<iframe src='https://maps.google.co.jp/maps?q=35.630974,139.743718&output=embed&t=m&z=16&hl=ja' frameborder='0' scrolling='no' mapTypeControl='no' marginheight='0' marginwidth='0' width='100%' height='300'></iframe> |
widthとheightを指定すればサイズも調整できます。
GoogleMapを表示するにはAPIキーが必要という情報が氾濫していますが、iframeタイプなら不要なようでした。
以下余談です。
今後必要になることがあるかもなので、その場合は下記のようにロードする必要が出てくるかもしれません。
Googleのガイドに従い、APIキーを取得し、
https://developers.google.com/maps/documentation/javascript/get-api-key?hl=ja
こういう風に指定します。
htmlのヘッダに下記を記載します。(ヘッダでなくても動きそう)
|
1 2 3 |
<script async defer src="https://maps.googleapis.com/maps/api/js?key=[先ほど取得したAPIキー]&callback=initMap"> </script> |