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.

関連記事

no image

WordPressサイトで表示高速化をいろいろやってみた。

この記事は約 1 分で読めます。 スマホなどでWebページを閲覧するようになって、表示が遅いサイトはせっかくアクセスしても表示されないまま諦めてしまうことが多々あります。 Googleが検索結果の順位 …

no image

WordPressテンプレートタグをメモ【コンテンツ編】

この記事は約 1 分で読めます。WordPressにはたくさんのテンプレートタグがあります。 似たようなものや、同じ結果なのに記述の仕方が何通りもあったりするので、後で「何だっけ?」って思う事もしばし …

no image

scroller.jsで「するするスクロール」にチャレンジ♪

この記事は約 1 分で読めます。以前、yuga.jsを使ってページ内リンクを「するするスクロール」にチャレンジしました。 今回は、scroller.jsを使って同じような事をやってみたいと思います。 …

no image

WordPress 子テーマを作ってみた。

この記事は約 1 分で読めます。 WordPressで公開されているテーマを自分なりにカスタマイズしたいとき、2通りの方法があると思います。 1つ目は直接テーマをいじる方法。2つ目は、「子テーマ」を作 …

no image

Photoshopのテキストレイヤーからテキストを抽出する方法

この記事は約 2 分で読めます。 Photoshopで作られたカンプからコーディングをする時に、テキストレイヤーにある文字をいちいち入力するのは面倒だと思いつつ、今まで全て手打ちしてました。。。時間ロ …