More than 5 years have passed since last update.

Google Mapを自作サイトに組み込んでみた

Posted at 2019-08-30

自分で作成したHTMLのサイトにGoogleMapを挿入してみました。
Googleの機能を組み込むなんて、APIを取得したりするからめんどくさそうと思われがちですが、調べていると意外にもAPIを取得しなくても簡単に表示させられちゃうんですね。

共有機能を使う

実際にGoogleMapを開いて、表示させたい部分にピンをさして共有ボタンをクリックします。
すると、「地図を埋め込む」というタブが出てくると思うので、それを選択。
ここで次のようなコードが出てきます。

<iframe src="https://www.google.com/maps/embed?pb=○○" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

pb=○○の部分はランダムで作成される文字列のようで、widthとheightとframeborderに関しては任意の数値です。

これを表示させたい箇所に組み込むだけで、しっかりとサイトに表示されました。

埋め込みって必ず何らかのAPIを取得してやらないといけないと思い込んでいたので、少し驚きでした。
時短を目指してやっている人にはいい機能ですね。