Google Maps 高くなりましたね。
そしてクレジットカードの登録が必要なようです。少し面倒ですね。
https://cloud.google.com/maps-platform

とはいえ、まだ200ドル分は無料で使えるとのことです。
そして、単純なマップ表示だけなら引き続き無料で使えます。回数制限もありません。

「単純なマップ表示」が何に当たるかですが、
PlaceモードかViewモードでウェブページに地図を埋め込む場合らしいです。

↑の Embed の部分です。

Place mode

https://developers.google.com/maps/documentation/embed/guide?authuser=5#place_mode

Placeモードは、特定の一箇所にピンを立てて、マップを表示させるだけというモードです。
普通のウェブサイトならこれで十分な気もします。クレカ登録が必須というのが難点ですが、これが無料なのであれば、他の地図サービスを探さなくても良いかなと思いました。

1
2
3
4
5
6
<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.com/maps/embed/v1/place?key=YOUR_API_KEY&q=xxx" allowfullscreen>
</iframe>

v1/place とすることで Placeモードを指定できます。
xxx の部分に住所、場所の名前、Place ID を指定できます。
Place ID の場合は place_id: を頭に付けます。

東京都庁を表示してみる

1
2
3
4
5
6
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_KEY&q=東京都庁" allowfullscreen>
</iframe>

緯度経度を指定してピンを落とすことができないようなドキュメントですが、実はできます。
&q=東京都庁 を &q=緯度,軽度 に書き換えるだけですね。

1
2
3
4
5
6
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?key=YOUR_KEY&q=35.6896342,139.6921007" allowfullscreen>
</iframe>

ただ、この場合、地図の左に出てくる場所の名前が緯度経度になってしまうので、あまり良いUXではありませんね。場所の名前指定や住所指定でちゃんとピンが落ちる場合は、そちらの方が良いかと思います。

View mode

ViewモードもPlaceモードとほぼ同じですが、マーカーなしです。
ピンを表示したくない場合はこちらを選択します。

v1/place を v1/view にするだけですね。
その他はほぼ同じです。

1
2
3
4
5
6
<iframe
width="600"
height="450"
frameborder="0" style="border:0"
src="hhttps://www.google.com/maps/embed/v1/view?key=YOUR_KEY&center=-33.8569,151.2152&zoom=18" allowfullscreen>
</iframe>

実はAPI keyなくても表示できる

クレカ登録して、API key取得して、コードに貼り付けて。。。とやらなくても、実は地図が表示できます。
Google maps で目的の場所を検索し、共有設定のところで iframe のコードを取得すればOK。エンジニア以外の方は、この方法で表示している人も多いのではないでしょうか。
Javascript で表示させていて、その必要がない場合は、この方法を取ることで作業が軽減されますし、費用もかかりません。

まとめ

回数制限なしで無料で使用したい場合は、

• 1. Placeモード or Viewモードで使用する（クレカ登録は必要）
• 2. Google Mapsのウェブサイトから埋め込みコードを取得する（クレカ不要）

という感じです。
　　

参考

Google Mapsの詳細プライステーブル
https://cloud.google.com/maps-platform/pricing/sheet/?authuser=5