Google Maps Embed APIを使用したGoogle マップ埋め込み地図の比較

はじめに

以前、このホームページで内容がほぼ同じGoogle Maps Embed APIを使用したGoogleマップの埋め込み地図を比較した記事を掲載していたのですが、Google Maps Embed APIがGoogle Maps Platformに統合された際、無料で使用できていたものが、有料になってしまったものだと勝手に思い込み、記事を削除しておりました。

しかし、調べてみると2024年4月2日時点ではGoogle Maps Embed APIは無料で無制限に使えるようで、改めて以前の記事を現在のGoogle Maps Embed APIのページの内容に合わせて、地図を比較しやすく、また内容がシンプルになるようブラッシュアップしてアップいたします。記事をシンプルにするために各地図モードのパラメータは省いておりますので、各地図モードのリンクよりご参照ください。

Google Maps Embed APIを使用した地図のメリットは、無料で利用できて、いくつかの地図モードがあり、特別なプログラムは使わず、パラメータを使用してオリジナルの地図を制作し、iframeをホームページに埋め込むだけですので、ちょっとした気の利いた地図を使用したいという場合にはもってこいかもしれません。

デメリットとしてはAPIキーを取得する際、少し設定が煩わしいかもしれません。

地図モード

Google Maps Embed APIでは次のいずれかの地図モードを指定できます。

Place モード

Place モードを使用した岡山駅の地図:

この地図は place で place モードを指定、 地図上のマーカーの位置を q で 岡山県の岡山駅の 岡山+駅,岡山+県 に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/place?key=APIキー&q=岡山+駅,岡山+県" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

View モード

View モードを使用した岡山駅のサテライト地図:

この地図は view でview モードを指定、center で地図の中心を岡山駅の緯度と経度 34.666401,133.918637 に指定、 satellite で地図のタイプをサテライトに指定、 zoom で地図のズームレベルを 18 に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/view?key=APIキー&center=34.666401,133.918637&zoom=18&maptype=satellite" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

View モードを使用した岡山駅の地図:

この地図は view でview モードを指定、center で地図の中心を岡山駅の緯度と経度 34.666401,133.918637 に指定、地図のタイプは指定せず、 zoom で地図のズームレベルを 18 に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/view?zoom=16&center=34.666401,133.918637&key=APIキー"  
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

Directions モード

Directions モードを使用した車で岡山駅から尾道港（広島県）までの（有料道路、高速道路を除いた）ルート地図:

この地図は directions で direction モードを指定、出発地点を origin で岡山県の岡山駅の 岡山+駅,岡山+県 に指定、目的地点を destination で広島県尾道市の尾道港 尾道+港,広島+県 に指定しています。移動手段を mode で車の値である driving に指定、除外するものに avoid で有料道路と高速道路の tolls|highways に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/directions?key=APIキー&origin=岡山+駅,岡山+県&destination=尾道+港,広島+県&mode=driving&avoid=tolls|highways" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

Directionsモードを使用した岡山駅から金毘羅宮（香川県）までのルート地図（公共機関を使用）:

この地図は directions で direction モードを指定、出発地点を origin で岡山県の岡山駅の 岡山+駅,岡山+県 に指定、目的地点を destination で香川県の金毘羅宮 金毘羅宮,香川+県 に指定しています。移動手段を mode で交通機関（電車とバス）の値 transit に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/directions?key=APIキー&origin=岡山+駅,岡山+県&destination=金毘羅宮,香川+県&mode=transit" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

Street View モード

Street View モードを使用した岡山駅構内の地図:

この地図は streetview でstreetviewモードを指定、location で岡山駅の緯度と経度 34.666401,133.918637 を指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/streetview?location=34.6664,133.9186&key=APIキー" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

Search モード

Search モードを使用した香川県のうどん店の地図:

この地図は search でsearch モードを指定、検索キーワードの香川県のうどん店を q で うどん+in+香川+県 に指定しています。

<iframe 
src="https://www.google.com/maps/embed/v1/search?zoom=9&key=APIキー&q=うどん+in+香川+県" 
width="600" height="450" frameborder="0" style="border:0" referrerpolicy="no-referrer-when-downgrade" allowfullscreen>
</iframe>

まとめ

Google Maps Embed APIを使用した5種類の地図モードを比較いたしました。企業のホームページやキャンペーンサイト、また個人で運営されているホームページやブログにもこれらのように特別なプログラムを必要とせず、パラメータを付け加えたり変更することで手軽にそして無料でカスマイズできる地図を設置することが可能です。用途に合う地図モードがあれば是非お試しいただければと思います。

私たちAEDIについて

私たちAEDIは岡山県倉敷市を拠点とするホームページ制作/Web制作会社・デザイン会社です。ホームページ制作・WordPress構築・多言語サイト構築・アプリ等のUI/UXデザインのホームページ制作サービス、ロゴデザイン・チラシデザイン・パンフレットデザイン・カタログデザイン・ポスターデザイン等のグラフィックデザインサービス、モーショングラフィクス・アニメーションのモーションデザインサービス、アプリやサービス、また企業・組織のマスコットキャラクター・イラストを制作するキャラクターデザインサービス、そしてブランディングのブランドデザインサービスを提供しています。岡山や倉敷の方はもちろん全国に対応しておりますのでどうぞお気軽にご連絡ください。

References:

地図の埋め込み  |  Maps Embed API  |  Google for Developers

料金プランと API の費用 – Google Maps Platform