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

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

 

Overview  |  Maps Static API  |  Google Developers

通常のGoogleマップ

 

表示に時間がかかることが多いです。

 

 

Google Static Maps API

 

コード(大きさ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マップのリンクを付けておくと便利です。

Googleマップ