WEB Tips ウェブ・アプリ デザイン・コーディング

Google mapを静止画としてウェブページに埋め込む Google Static Maps API

本記事にはプロモーションが含まれている場合があります。

Google mapを静止画としてウェブページに埋め込む Google Static Maps API

一つのウェブページに複数のGoogleマップを設置したい場合、
どうしても表示の重さが気になります。
あと現在のGooglemapはIE7、IE8などの古いブラウザには対応していないので
そのような古いブラウザでもGooglemapを表示したい場合にも役立つ?
Google Static Maps APIを使えば、
Googleマップを画像として生成してくれるので、高速、軽量で表示できます。
※ウェブ、Andoroid、iOSとそれぞれに無料で使える制限あり。
ウェブページの場合、
「マップのロードが 90 日間連続して 1 日 25,000 回を超過するまで無料」
くわしくはこちらで
https://developers.google.com/maps/documentation/static-maps/?hl=ja

APIキーの取得から

1)Googleアカウントを取得し、Google Developers Consoleにアクセス
https://console.developers.google.com
2)プロジェクトを作成
ホーム My Project_8
3)GoogleAPIを利用する
ホーム demo1602_7
4)Google Static Maps APIをクリック
Google Maps APIの中にGoogle Static Maps APIがあります。初期状態では隠れてるので、「その他」をクリックすると表示されます。
API ライブラリ demo1602_6
6)APIを有効にする
APIを有効にするをクリック
Google Static Maps API demo1602_5
7) 認証情報にすすむ(API KEYを作成)
「認証情報に進む」をクリック
Google Static Maps API demo1602_4
APIを呼び出す場所は「ウェブブラウザ(javascript)」を選びました。
「必要な認証情報:をクリック
認証情報ウィザード demo1602_3
8) APIキーを生成
名前の「ブラウザキー1」は特に変更しなくてもよいのかな。
APIキーを作成するをクリック
 
認証情報ウィザード demo1602_2
APIキーが生成されます。これをコピー
認証情報ウィザード demo1602

Google Static Maps APIを使う

基本のURL

https://maps.googleapis.com/maps/api/staticmap?parameters

parametersの部分に必要なパラメータを付加していきます

1)center (※必須)

地図の中心を座標やキーワードで指定する
キーワードはURLエンコードする
markers,path,visibleを別途指定している場合は省略可。

2)size (※必須)

生成する画像のサイズ[横width]x[縦height]で指定
幅300ピクセル、高さ240ピクセルの画像にしたい場合は
300x240

3)sensor(※必須)

GPS情報を取得してする場合はtrue,そうでない場合はfalse
sensor=true,
sensor=false

4)key(※必須)

取得したAPIキー

5)zoom

縮尺値(1~22)

6)markers

マーカーを表示

7)maptype

地図の種類を指定
・roadmap(通常の地図:デフォルト)
・satellite(航空写真図)
・ hybrid(roadmapとsatelliteの組み合わせ)
・terrain(地形図)

8)format

画像形式を指定できます
・png(デフォルト)
・GIF
・JPG

9)language

地図上のラベルの言語を指定できます。
英語の場合はen
日本語の場合はja

10) path

地図に線を引きます

11)visible

ちょっとよくわからず
Google Developersより

visible (optional) specifies one or more locations that should remain visible on the map, though no markers or other indicators will be displayed. Use this parameter to ensure that certain features or map locations are shown on the Google Static Maps API.

表示(オプション)は、マーカーやその他のインジケーターは表示されませんが、地図上に表示されたままにする必要がある1つ以上の場所を指定します。 このパラメータを使用して、特定のフィーチャまたはマップの場所がGoogle StaticMapsAPIに表示されるようにします。

12)region

これも使いどころがよくわからず
Google Developersより

region (optional) defines the appropriate borders to display, based on geo-political sensitivities. Accepts a region code specified as a two-character ccTLD ('top-level domain') value.

例)ジブリ美術館

https://maps.googleapis.com/maps/api/staticmap?center=35%2e696325%2c%20139%2e570453&markers=35%2e696325%2c%20139%2e570453&zoom=14&size=400x400&key=YOUR_API_KEY

今月キャンペーン特典があるサービス

  • エックスサーバー
    利用料最大35%キャッシュバックで月額費用643円&ドメイン永久無料 - 2023年11月28日(月)12:00まで
  • ConoHa WING
    WINGパック36ヶ月で月額643円 55%OFF - 2023年11月30日(木)16:00まで
  • カラフルボックス
    ドメイン永久無料特典とBOX2以上の月額費用が50%OFFのクーポンコード「SERVER50

-WEB Tips, ウェブ・アプリ, デザイン・コーディング
-