初めに
Google Maps Platformを用い、無料でHP埋め込みに使用できる、
Maps Embed APIを使用する。
できることは、プレイ(場所の表示)/ルート(ルートの表示)/サーチ(検索結果)の表示の3パターン。
Google Maps Platform の料金より引用(2021年12月現在)
Maps Embed API リクエストは、使用量の上限なく、すべて無料でご利用いただけます。
その他APIは料金表を確認のこと
環境
- Windows10
- Google Chrome 96.0
パラメータ
プレイスモード/サーチモード
- key(必須) => Google Cloud Platformに登録し取得して下さい。
- q(必須) => 検索ワード(名称、住所、プラスコード※空白の代わりに+を使用すること)
- center => 中心の緯度経度(例:37.4218,135.0840)
- zoom => ズームレベルを指定(0-21)
- maptype => roadmap (デフォルト) or satellite
ルートモード
- key(必須) => Google Cloud Platformに登録し取得して下さい。
- origin(必須) => 出発地点(名称、住所、プラスコード※空白の代わりに+を使用すること)
- destination(必須) => 到着地点(名称、住所、プラスコード※空白の代わりに+を使用すること)
- waypoints => 複数の中継地点が指定できます。ハイプ"|"にて指定(例:Berlin,Germany|Paris,France).
- mode => driving, walking, bicycling , transit, or flyingから指定
- avoid => フェリーや有料道路、高速道路を通らないルートの指定 (例:avoid=tolls|highways).
- units => metric or imperial
- center => 中心の緯度経度(例:37.4218,135.0840)
- zoom => ズームレベルを指定(0-21)
- maptype => roadmap (デフォルト) or satellite
本コードではURLにパラメータをセットしてください。
サンプルコード
GoogleMapsPlatfrom_enbedAPI.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>Google maps Platform EnbedAPI</title>
</head>
<body>
<div name="enbed_place">
<h align="center">Google map Platform EnbedAPI デモサイト</h>
<h>【プレイスモード】</h>
<iframe
width="800"
height="600"
frameborder="0"
style="border: 0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY
&q=東京駅&zoom=15"
>
</iframe>
</div>
<div name="enbed_route">
<h align="center">【ルートモード】</h>
<iframe
width="800"
height="600"
src="https://www.google.com/maps/embed/v1/directions?origin=東京駅&destination=銀座駅
&mode=walking&key=YOUR_API_KEY"
allowfullscreen
>
</iframe>
</div>
<div>
<h align="center">【サーチモード】</h>
<iframe
width="800"
height="600"
src="https://www.google.com/maps/embed/v1/search?q=神保町カレー&key=YOUR_API_KEY"
allowfullscreen
></iframe>
</div>
</body>
</html>
終わりに
無料で意外と多くのことができますので、一度試してみて下さい。
Google Maps Platformを使用するメリットは、多くのユーザーが使い慣れいているUXを提供できることが一番大きいと思われますが、他のプラットフォームにはない強みは、パラメータのqにある程度曖昧な言葉を入れても機能することだと思われます。
そのため、内部システム等で利用する際も、住所表記の揺れ等に比較的強いと思います。
※各種サービスを利用する際はご自身で確かめてご利用ください。有料へなる場合や、あるパラメータを利用する場合は有料となる場合がございます。
参考サイト