Googleマップのカスタマイズ。Google Maps Static API

Overview  |  Maps Static API  |  Google Developers

 

通常のGoogleマップだと表示が遅いので「Google Maps Static API」を使ってみることにしました。Googleマップの画像を埋め込むことができるので早く表示することができます。

 

コード(大きさ600×480・東京スカイツリーで表示)

<img src="http://maps.googleapis.com/maps/api/staticmap?center=東京スカイツリー&amp;zoom=14&amp;size=600x480&amp;" />

 

Google Maps APIの仕様が変わりましたのでsensor=のパラメーターは必要ありません。

地図がエラーになる場合は「sensor=true」「sensor=false」を削除すると表示されるようになります。

 

マーカーを付ける

 

このままですと目標の場所が分かりにくいのでマーカーを付けます。

markers=icon:http://ドメイン/googlemap-icon.png%7C経緯,経度
  • http://ドメイン/googlemap-icon.pngはアイコンの場所
  • markersの中の区切りは%7Cで表示
  • 経緯,経度の代わりに場所の名前でも表示できる。座標はこちらから
  • アイコンのサイズは最大4096ピクセル(正方形で64×64)
  • PNG形式がおすすめ

 

デフォルトのアイコンマーカーを表示させることもできます。

markers=color:red%7C東京スカイツリー
<img src="http://maps.googleapis.com/maps/api/staticmap?center=東京スカイツリー&amp;zoom=14&amp;size=600x480&amp;markers=color:red%7C東京スカイツリー&amp;" />

 

ズームさせたい場合

 

位置パラメーターをcenterからzoomに変更します。

<img src="http://maps.googleapis.com/maps/api/staticmap?zoom=東京スカイツリー&amp;zoom=14&amp;size=600x480&amp;markers=color:red%7C東京スカイツリー&amp;" />

 

大きさを変えたい場合は値を変更

 

※無償版の最大値は640×640

<img src="http://maps.googleapis.com/maps/api/staticmap?zoom=東京スカイツリー&amp;zoom=14&amp;size=300x300&amp;markers=color:red%7C東京スカイツリー&amp;" />

 

地図を画面の中央に表示させたい場合

 

<center></center>で囲みます。

<center><img src="http://maps.googleapis.com/maps/api/staticmap?zoom=東京スカイツリー&amp;zoom=14&amp;size=600x480&amp;markers=color:red%7C東京スカイツリー&amp;" /></center>

 

後書き

 

このままだとスクロールして見ることはできませんので、

地図の下にGoogleマップのリンクを付けておくと便利です。