Webの記録

jquery.gmap3.jsを使って、Googlemapを簡単にカスタマイズ♪

投稿日:2011年10月6日 更新日:

この記事は約 5 分で読めます。

map_mini

今回は、GoogleMapを埋め込んで、カスタマイズ出来るjQuery プラグイン「jquery.gmap3.js」。使ってみたら楽に出来たので、メモです。

配布元:blog.bumberboom
 配布元のサイトでサンプルファイルがダウンロード出来るので、そのサンプルを見れば楽に出来ると思います。

※2011.12.26に特徴を追記しています。

特徴

  • Google Maps API V3 を使用した地図の描画を手助けするプラグイン。
  • マーカーの複数表示や、オリジナルマーカー画像の使用が簡単。
  • MITライセンス。
  • IE7以下では動作しない(2011.12.26追記)

 

位置情報を調べるには

参考サイト:Geocoding
検索窓に調べたい場所の住所を入力すると、緯度・経度が出るのでこの数値を利用します。

設置方法

(1)Google Maps APIを読み込み、headerへ記述します。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

 

(2)jQuery本体と「jquery.gmap3.js」をダウンロードして、headerへ記述します。

<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.gmap3.js"></script>

 

(3)gmap3を呼び出し。headerへ記述。(この部分をjsファイルに分けても良いと思います。)
複数ある場合は、markersの部分{},の後部分を繰り返し記述します。
独自アイコンを入れたい時は、「icon: “アイコンのパス”,」をtitleの後に記述します。

&lt;script type="text/javascript"&gt;

$(function() {

$("#gMap").gmap3({
latitude: 33.884629,
longitude: 130.87961,
zoom: 10,
navigationControl: true,
mapTypeControl: true,
scaleControl: true,
markers: [
	 {
		address: '福岡県北九州市小倉北区魚町1-1-1',
		title: 'ギャロップ小倉(ヤマハミュージック九州小倉店)',
		content: '<div class="hoge"><h4>ギャロップ小倉<br />(ヤマハミュージック九州小倉店)</h4><p>北九州市小倉北区魚町1-1-1<br />レッスン曜日:火・水・金・土</p></div>',
		icon: "images/icn_marker.png",
		openInfo: true
	 },

	 {
		latitude: 33.827082,
		longitude: 130.865752,
		title: '小倉南センター(ヤマハミュージック九州小倉店)',
		icon: "images/icn_marker.png",
		content: '<div class="hoge"><h4>小倉南センター<br />(ヤマハミュージック九州小倉店)</h4><p>北九州市小倉南区徳力5-4-1<br />レッスン曜日:隔週 土・日</p></div>',
	 }

]
});

});

 

 

(4)HTMLの記述を最後にします。GoogleMapを表示したい部分に以下を入れるだけです。


<div id="gMap"></div>

<!-- #gMap -->

 

(5)CSSで整えます。#gMapで表示したい幅と高さを入れないと表示が出ないので注意です!

※「address」と「latitude, longitude」はどちらかを指定すればOK。両方指定した場合は「address」が優先されます。
「address」・・・地名や住所など文字情報
「latitude」・・・緯度(Geocodingなどで調べた数値)
「longitude」・・・経度(Geocodingなどで調べた数値)
「zoom」・・・縮尺(整数)
「title」・・・吹き出しに表示されるタイトル。
「content」・・・吹き出しに表示される「title」以下の文字情報。

GoogleMap関連の過去記事

-Webの記録
-, , ,

執筆者:


  1. bumberboom より:

    プラグインの作者です。ご紹介ありがとうございます。

    • Motoshige より:

      bumberboomさま。

      プラグインの作者さまにコメント戴けるとは!!
      とても便利なプラグインを開発して戴き、ありがとうございます!!
      使ってみて良かったので、紹介させて戴きました。

comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

WordPressプラグイン「Simple Map」でスマホ対応GoogleMapを簡単設置。

この記事は約 1 分で読めます。 GoogleMapは、いろいろとお世話になっています。ただスマホで時々面倒だと思うのが、スクロールしていてGoogleMapに何気に指が触れてしまった時。 画面の横幅 …

no image

WordPress 「Contact Form7」で送信完了画面と自動送信メールを試してみた

この記事は約 2 分で読めます。 WordPressの「Contact Form7」は、お問い合せフォームを簡単に取り付ける事が出来るという便利なプラグインです。 以前から利用しているのですが、最近ま …

no image

クリッカプルマップをjQueryでレスポンシブ対応させる方法

この記事は約 1 分で読めます。 滅多に使わないのですが、たま~に「クリッカプルマップ」を使用してコーディングをする事があります。 しかし、「クリッカプルマップ」はレスポンシブで使用してしまうと、リン …

no image

thickbox.jsを使ってLightBox風モーダルウィンドウにチャレンジ♪

この記事は約 1 分で読めます。今回も、数枚の画像を効果的に見せる方法にチャレンジしたいと思います。 ・・・で、画像をクリックすると大きな画像を表示させることが出来るLightBox風にしたいなぁって …

no image

Webサイト移転の時に自動的にジャンプする方法

この記事は約 1 分で読めます。 たまたまいじっていたサイトでサーバーを移転する事になりました。 そんなワケで、ちょこっとメモ。 今回、独自ドメインをとっていなかった為、URLが変わります。 その場合 …