Google Maps JavaScript APIを使用せずにiframeで地図を埋め込む方法４つ

はじめに
iframe埋め込みマップなら無料で使える
その前に
Google Maps JavaScript API以外で、iframe埋め込みマップを実現する方法はAPIキー利用も含めて４つ

はじめに

コーポレートサイトやショップのサイトに地図はつきものです。

そしてだいたいはGoogleMapsを利用します。APIキーを取得してJavaScriptで実装するととても楽です。

しかし、ウェブサイトを制作依頼されたお客様に「Googleアカウントを取得してビリング情報を登録してプロジェクトを作ってください」とは言いづらい。地図なんて分かればなんでもいいですというお客様にAPIキーを取得してもらうのは大変です。

iframe埋め込みマップなら無料で使える

なんでもかんでもAPIを使っていますが、実は使わなくてもよい地図がほとんどなのです。
どうしてもAPIじゃないといけない理由が明確にある場合は別ですが、
無料・無登録でつかえるならば、それを使いたいですね。

その前に

Google Maps JavaScript APIとは何ですか？

GoogleMapsを表示するオーソドックスな方法としてGoogle Maps JavaScript APIがあります。

Googleの請求先アカウント（クレジットカード情報などを連携）でプロジェクトを作成してAPIキーを取得しGoogle Maps JavaScript APIを使用してJavaScriptで地図を表示します。さまざまな地図の表現が可能です。JavaScriptの知識が多少あればパラメーターでちょいちょいと素敵な地図を表示することが出来ます。

今回はこの方法以外の４つの表示方法をご紹介します。

Google Maps JavaScript API以外で、iframe埋め込みマップを実現する方法はAPIキー利用も含めて４つ

1．GoogleMap上でソースコードを取得する

⇒　地図を埋め込む、場所を共有する | Googleマップヘルプ

通常のコーポレートサイトの所在地を掲載するくらいであれば、これで十分です。
店舗が数十もある場合や、ちょっとした変更をしたいときなど、いちいちマップを開いて共有ソースコードを再取得しないといけないのが煩わしい面もあります。

2．GoogleMapsAPIをiframeで呼び出す

⇒iframeのソースにEmbed APIへのurlを設定し、パラメーターで位置を指定する

<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」を指定する

<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…韓国語