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

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

使用方法
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>
Google Mapsを簡単に表示するJavaScript「gMap」サンプル

sponsors

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

記事作成:
記事URL:

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