2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Google Map をスマートフォンサイト用 Web サイトに埋め込む

Posted at

簡易な方法

普通に Google Map で検索すると、 地図を共有/埋め込む が選択できます。

神山温泉_-_Google_マップ.png

自分専用の地図というメッセージが出ていますが、検索結果のマーカーは表示されるので問題ありません。(表示形式が自分専用という事なんですかね)

神山温泉_-_Google_マップ.png

iframe タグが表示されるので、後は自分の Web サイトに入れるだけです。

ちょっと問題

埋め込んだサイトを iPhone の Mobile Safari で確認していると、拡大率が検索結果の通りではなく世界地図が表示されてしまいました。(ただしマーカーはちゃんと付いています)

ちないに Mobile Safari では Google アカウントにログインしていない状態でした。ログイン状態にすると上手くいく場合もあり、この辺がアカウントに紐付いた表示形式が関係しているのかなと思います。

参考

Google Maps Embed API を利用する

基本は以下のサイトを参照いただければ分かると思います。

iframe タグを作成

埋め込みタグの作成画面 で検索キーを入れて、API Key を入れるだけなので簡単です。

Google_Maps_Embed_API_—_Google_Developers.png

拡大率を指定する

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_tag
<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 モードではできませんでした。。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?