ITエンジニア/デザイナ向けにオープンソースを毎日紹介

GoogleマップはWebサイト内に埋め込んで使えるのが便利ですが、Ajaxに対応していないデバイスや動かす機能を無効にしたい場合静的な画像として出力してくれる機能があります。

しかしあえて使うのが面倒で何となく避けていたという方はStatic-google-Mapsを使ってみると良さそうです。

Static-google-Mapsの使い方

出力デモです。
出力デモです。

マーカーも立てられていますが、これは画像です。

使い方としては以下のようなコードになります。

  var url = $.staticMap({
    markerIcon: 'http://tinyurl.com/2ftvtt6',
    address: 'Shibuya-ku, Tokyo, Japan',
    width: 500,
    height:400,
    zoom: 13
  });
  $('#staticMap').attr('src', url);

  var urlLive = $.liveMapLink({
    address: "Shibuya-ku, Tokyo, Japan",
    zoom: 12
  });

  $('.liveMap').attr('href', urlLive);

addressで表示したい住所を当てるだけなので簡単に使えます。

日本語にも対応しています。
日本語にも対応しています。

静的画像のURLが取得できますので、後は自由に使えるでしょう。ズームにも対応しています。多くの地図を表示したりする際にJavaScriptで処理していると重たくなるので、静的画像表示と組み合わせると良さそうです。

Static-google-MapsはJavaScript製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

Google maps

ShvedDmutro/Static-google-Maps

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2