Google mapを画像表示

Google map apiの使用量を減らしたいという注文から
初期表示を画像にした時のメモ
※1 実際のサイトではクリック後にGoogleMapに表示切替とかしてます
※2 画像でもAPIKEYは必要です

<img loading="lazy" style="width:500px;height:300px;" title="title" alt="alt" src="https://maps.googleapis.com/maps/api/staticmap?center=*LATITUDE*,*LONGITUDE*&zoom=*MAPZOOM*&size=640x288&scale=2&maptype=roadmap&markers=size:mid|color:red%7Clabel:%7C*LATITUDE*,*LONGITUDE*&sensor=false&key=*APIKEY*" />

下記を書き換えると使えると思います
*LATITUDE* 緯度
*LONGITUDE* 経度
*MAPZOOM* ズーム:1-16
*APIKEY* GoogleMapApiKey

他にもカスタムは可能です
ドキュメント
https://developers.google.com/maps/documentation/maps-static/start


いいなと思ったら応援しよう!