[JS]Googleマップにさまざまなオプションを追加して簡単に設置できるスクリプト -GMAP3
Post on:2010年11月5日
Google Mapsにオリジナルのマークやポリゴン、任意の画像などを簡単に加えて設置できるjQueryのプラグインを紹介します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110503.png)
GMAP3 -jQuery plugin to manage Google Map API
デモ
[ad#ad-2]
GMAP3はGoogle Map APIを使用するため、使用するページに外部ファイルとして記述します。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Googleマップの設置は簡単で、空のdiv要素にidを指定して配置します。
下記に簡単な例を紹介します。
HTML
<div id="test1"></div>
JavaScript
$.gmap3.setDefault({ init:{ center:{ lat: 48.858508, lng: 2.294315 } } }); $('#test1').gmap3();
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-01.png)
指定した座標を中心に表示したGoogleマップ
[ad#ad-2]
多数あるデモの中から、下記にいくつか紹介します。
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-02.png)
ストリートビューを表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-03.png)
マークを表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-04.png)
オリジナルのマークを表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-05.png)
インフォメーションウインドウを表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-06.png)
インフォメーションウインドウとマークを表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-07.png)
ラインを描いたGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-08.png)
多角形を描いたGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-09.png)
ストリートビューの連動マーク付きのGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-10.png)
交通情報を表示したGoogleマップ
![デモのキャプチャ](/wp-content/uploads-2010-2d/2010110504-11.png)
画像をオーバーレイ表示したGoogleマップ
sponsors