2014/09/18

Google Mapをカンタン埋め込み!!jQueryプラグイン『Static-google-Maps』

Google Mapをカンタン埋め込み!! jQueryプラグイン『Static-google-Maps』

Google Mapが埋め込んであるページはよく見かけますね.
ただ,スマートフォンやタブレットなどの端末で見ている場合は,ページのスクロール操作中に地図が動いてしまい,やや使いにくいと感じることがあります.

そこで,Google Mapのスクショをサイト上に置き,クリックするとGoogleMapを表示できるjQueryプラグインのStatic-google-Mapを紹介したいと思います.

目次

ダウンロード

プラグインを入手するには,https://github.com/ShvedDmutro/Static-google-Mapsにアクセスし,右側にあるDownload ZIPをクリックしてダウンロードします.

設置方法

ダウンロードしたファイルを解凍し,jQuey本体と共に読み込みます.

<script type="text/javascript" src="jquery-1.11.0.js"></script>
<script type="text/javascript" src="map.js"></script>

さらに,HTML上に

<a class="liveMap" target="_blank" href="#"><img id="staticMap" src="" alt="" /></a>

上記のように表示するための領域を設置します.

そして,JavaScriptを用いて以下のようにオプションを指定し,表示させます.

var url = $.staticMap({
		//カスタムマーカーアイコンのURL
		markerIcon : 'http://tinyurl.com/2ftvtt6',
		//住所(緯度経度も可)
		address : '東京都渋谷区円山町5-3 萩原ビル7F',
		//画像の縦と幅の大きさ
		width : 500,
		height : 400,
		//ズームレベル
		zoom : 13
	});
$('#staticMap').attr('src', url);
var urlLive = $.liveMapLink({
	address : "東京都渋谷区円山町5-3 萩原ビル7F",
	zoom : 12
});
$('.liveMap').attr('href', urlLive);

この他にも地図の種類などをオプションで指定できます.

サンプル

設置してみると以下のようになり,画像をクリックするとGoogle Mapが開きます.

まとめ

とてもカンタンにGoogle Mapを設置出来るので,スマートフォンやタブレットをメインターゲットにしたページを作成する場合に,導入を検討してみてはいかがでしょうか.