[JS]Googleマップにさまざまなオプションを追加して簡単に設置できるスクリプト -GMAP3

Google Mapsにオリジナルのマークやポリゴン、任意の画像などを簡単に加えて設置できるjQueryのプラグインを紹介します。

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();

指定した座標を中心に表示したGoogleマップ

[ad#ad-2]

多数あるデモの中から、下記にいくつか紹介します。

ストリートビューを表示したGoogleマップ

マークを表示したGoogleマップ

オリジナルのマークを表示したGoogleマップ

インフォメーションウインドウを表示したGoogleマップ

インフォメーションウインドウとマークを表示したGoogleマップ

ラインを描いたGoogleマップ

多角形を描いたGoogleマップ

ストリートビューの連動マーク付きのGoogleマップ

交通情報を表示したGoogleマップ

画像をオーバーレイ表示したGoogleマップ