iframeで埋め込みマップを実現する方法
1.GoogleMap上でソースコードを取得する
⇒ 地図を埋め込む、場所を共有する | Googleマップヘルプ
※これだと複数地図をつくらなければならない場合や、ちょっとした変更したいときなど、いちいちマップを開いて共有ソースコードを取得しないといけないのがだるい。
2.GoogleMapsAPIをiframeで呼び出す
⇒iframeのソースにEmbed APIへのurlを設定し、パラメーターで位置を指定する
1
|
<iframe src=“https://www.google.com/maps/embed/v1/place?q=…&key=[APIキー]”></iframe>
|
※これだとAPIを呼び出すのでGoogleMapsPlatformのビリングアカウント登録が必要だと思われます
そこで!
3.APIを使わずにパラメーター指定でiframeに地図を埋め込む(追記注:非公式な方法ということなので、いつか使えなくなる可能性があります!)
⇒iframeのソースに「http://maps.google.co.jp/maps?&output=embed」を指定する
1
|
<iframe src=“https://maps.google.co.jp/maps?output=embed&q=原宿駅”></iframe>
|
※これだとAPIを使ってないのでGoogleMapsから作った埋め込みソースコードと同様これまで通り使えます。
iframeで埋め込みマップパラメーター(引数)
下記のパラメーターが指定可能です。
文字列検索 | q=原宿駅 | 住所やランドマーク名 |
---|---|---|
緯度経度 | q=35.670821,139.702726 | 緯度経度の間に「,」 |
縮尺 | z=18 | 0~23 |
地図の中心点 | ll=35.670821,139.702726 | 緯度と経度の間に「,」 ピンの位置を画面中央からずらすことができます |
表示モード | t=m | m…地図 k…航空写真 h…地図+航空写真 p…地形図 e…Google Earth |
言語 | hl=ja | ja…日本語 us…英語 zh-CN…中国語簡 zh-TW…中国語繁 ko…韓国語 |