Google Mapsを簡単に表示するJavaScript「gMap」

Google Mapって便利ですよね。
でも細かい設定をするのは少し面倒とお思いの方にjQueryプラグインの「gMap - Google Maps Plugin For jQuery」を紹介します。
マーカー位置やzoomレベル、コントローラー設置など設定が簡単に可能です。

使用方法

gMap - Google Maps Plugin For jQueryからjquery.gmap-1.0.0.jsをダウンロードします。

<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=APIキー"></script>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.gmap-1.0.0.js"></script>
<script type='text/javascript'>
$(function() {
	$("#id名").gMap({ 
		controls: false, //コントローラーを表示するか
		scrollwheel:true, //マウスウィールを有効にするか
		markers: [{
			latitude: 35.64741885165956,  //緯度
			longitude: 139.71323132514954, //経度
			html: "テキストを記述",
			popup: true //ポップアップ表示させるか
		}],
		icon: { image: "images/gmap_pin.png", //マーカーを変える場合
			iconsize: [19, 21], //サイズ
			iconanchor: [4, 19], //設置位置
			infowindowanchor: [8, 2] }, //
		latitude: 35.648299,  //中心の緯度
		longitude: 139.7117936, //中心の経度
		zoom: 16 }); //zoomレベル
});
</script>
APIキーは、Google MAPS API に登録する - Google Maps API - Google Codeで取得したものを挿入ください。
あとは上記id名を付与すれば完成です。
<div id="id名" style="width: 547px; height: 320px; border: 1px solid #777"></div>

サンプル


Javascriptサンプルページ一覧
skuare.net