前回は動的なGoogle Mapsを表示させるGoogle Maps JavaScript APIについて紹介したので、今回は静的なGoogle Mapsを表示させるGoogle Maps Image APIついて紹介します。Google Maps Image APIでは、JavaScriptを必要とせずに静的なGoogleマップの画像やストリートビューの画像をホームページに簡単に埋め込むことができます。Google Maps Image APIには、Google Static Maps APIとGoogle Street View Image APIがあります。
今回は静的なGoogleマップ画像を表示できるGoogle Static Maps APIについて説明します。
■Google Static Maps APIとは
JavaScriptや動的な読み込みを行うことなくGoogleマップ画像をホームページに埋め込むことができるAPIです。
現在のGoogle Static Maps APIのバージョンは2.0です。
バージョン2.0はバージョン1.x系の後継バージョンです。
※バージョン1.xはサービスを終了しています。
■Google Static Maps APIのバージョン2.x系の主な変更点
・一部のパラメータの書き方が変更、廃止されました
・新機能が追加されました
※詳しくは参考サイトのStatic Maps API V2アップグレードガイドを参照してください。
■Google Static Maps APIの使用方法
Google Static Maps APIにはAPI KEYを使用した方法と使用しない方法があります。
・API KEYを使用する場合
Google Developers Consoleで「Static Maps API」を有効にして下記のようなURLをimgタグで読み込ませることでGoogleマップ画像を表示できます。
API KEYを使用するとAPIの使用状況(Googleマップ画像を何回表示したかの統計)を取得できます。※API KEYの使用は強く推奨されています。
<img src="http://maps.googleapis.com/maps/api/staticmap?center=33.885029,130.8810465&zoom=15&size=300x300&key={API_KEY}" />
keyパラメータにはGoogle Developers Consoleで作成したAPI KEYを割り当てる必要があります。
「Static Maps API」を有効にし、API KEYを作成する方法を簡単に説明します。
参考サイトのGoogle Developers Consoleにアクセスします。
メニューの「API」から「Static Maps API」を探しステータスを「ON」にします。
メニューの「認証情報」から「公開 API へのアクセス」の「新しいキーを作成」を選択します。
「ブラウザ キー」を選択して「ブラウザ キーの作成と許可対象リファラーの設定」には何も入力せず、API KEYを作成します。
・API KEYを使用しない場合
下記のようなURLをimgタグで読み込ませることでGoogleマップ画像を表示できます。
<img src="http://maps.googleapis.com/maps/api/staticmap?center=33.885029,130.8810465&zoom=15&size=300x300" />
・URLのパラメータについて
URLの必須パラメータは、centerとzoomとsizeです。
centerには数値(緯度と経度)または文字列(住所)を使用できます。
数値で「緯度30°経度130°」を指定する場合は「center=30,130」、
文字列で「北九州市小倉北区浅野」を指定する場合は「center=北九州市小倉北区浅野」となります。
zoomには1～21までの値を設定でき、数値が大きくなるほど詳細な地図が表示されます。
sizeには640×640まで設定できます。
※Google Maps API for Business(有料版)では2048×2048まで設定できます。
下に必須パラメータのみで構成したGoogleマップ画像を表示します。
※下のGoogleマップ画像のソースは付録のサンプル１にあります。
その他のパラメータにはscale、format、maptype、language、region、
markers、path、visible、style、sensorがあります。
よく使われるmaptypeとmarkersについて説明します。
maptypeは地図の種類です。roadmap(通常の地図)、satellite(航空写真)、hybrid(通常の地図 + 航空写真)、terrain(地形)が指定できます。
markersは地図にマーカーを表示できます。
赤いマーカーを「北九州市小倉北区浅野」と「北九州市小倉北区平和通り」に表示する場合はURLに下記のようなパラメータを追加します。
markers=color:red|北九州市小倉北区浅野|北九州市小倉北区平和通り
様々な色のマーカーを表示することもできます。
青いマーカーを「北九州市小倉北区魚町」、黒いマーカーを「北九州市小倉北区馬借」に表示する場合はURLに下記のようなパラメータを追加します。
markers=color:blue|北九州市小倉北区魚町&markers=color:black|北九州市小倉北区馬借
下にマーカーを追加したGoogleマップ画像を表示します。
※下のGoogleマップ画像のソースは付録のサンプル２にあります。
以上がGoogle Static Maps APIの使用方法です。
JavaScriptを使用しないので誰でも簡単にGoogleマップ画像をホームページに埋め込むことができ、画像として保存することができるので資料作成に役立ちます。Google Maps JavaScript APIとGoogle Maps Image APIを連携させて高度な地図アプリを作成することもできます。
次回は、Google Street View Image APIについて紹介します。
＜参考サイト＞
・Static Maps API V2
・Static Maps API V2アップグレードガイド
・Google Developers Console
＜付録＞
・サンプル１
必須パラメータのみでGoogleマップ画像を表示するサンプルコードです。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>サンプル１</title> </head> <body> <img src="http://maps.googleapis.com/maps/api/staticmap?center=33.889577,130.885284&zoom=15&size=300x300" /> </body> </html>
・サンプル２
マーカーを表示するサンプルコードです。
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>サンプル２</title> </head> <body> <img src="http://maps.googleapis.com/maps/api/staticmap?center=33.885029,130.8810465&zoom=15&size=300x300&markers=color:red|北九州市小倉北区浅野|北九州市小倉北区平和通り&markers=color:blue|北九州市小倉北区魚町&markers=color:black|北九州市小倉北区馬借" /> </body> </html>