簡易な方法
普通に Google Map で検索すると、 地図を共有/埋め込む が選択できます。
自分専用の地図というメッセージが出ていますが、検索結果のマーカーは表示されるので問題ありません。(表示形式が自分専用という事なんですかね)
iframe
タグが表示されるので、後は自分の Web サイトに入れるだけです。
ちょっと問題
埋め込んだサイトを iPhone の Mobile Safari で確認していると、拡大率が検索結果の通りではなく世界地図が表示されてしまいました。(ただしマーカーはちゃんと付いています)
ちないに Mobile Safari では Google アカウントにログインしていない状態でした。ログイン状態にすると上手くいく場合もあり、この辺がアカウントに紐付いた表示形式が関係しているのかなと思います。
参考
Google Maps Embed API を利用する
基本は以下のサイトを参照いただければ分かると思います。
- Google Maps Embed API - Google Developers
- 新しい Google Maps Embed API が公開、埋め込み地図のカスタマイズが簡単に - WWW WATCH
iframe タグを作成
埋め込みタグの作成画面 で検索キーを入れて、API Key を入れるだけなので簡単です。
拡大率を指定する
Optional parameters にあるように zoom
で拡大率を指定できます。
zoom sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings). The upper limit can vary depending on the map data available at the selected location.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=%E7%A5%9E%E5%B1%B1%E6%B8%A9%E6%B3%89&key=***&zoom=18"></iframe>
この拡大率の指定まで行うと、 Mobile Safari で Google へのログイン状態に関わらず期待するマップを表示させる事ができました。
iPhone(5S, iOS7) の Chrome や Android(4.4) の Chrome でも期待通り動作しました。
できなかった事
場所の情報を表示しているカード(?)の表示がマーカーに被さってしまっていたので、表示の中心座標をずらしたかったので region
を指定したかったのですが、place
モードではできませんでした。。