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

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

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

関連記事

no image

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

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

no image

Androidでp要素などが、勝手に改行されて幅が狭くなった時にしてみたこと。

この記事は約 1 分で読めます。 PCと同じようにスマホでも閲覧することが当たり前になって、最近ではアクセス解析をするとPCからの閲覧をすっかり抜いてしまったサイトもあります。 スマホからの見え方をチ …

no image

スマホサイトの画像コピーガード対策

この記事は約 1 分で読めます。 スマホ向けのサイト制作の機会が増えました。 PC向けの時にいろいろとしていた画像コピーガード対策も、スマホ対応しなくてはならなくなってきました。 画面の長押しすると、 …

no image

iPad・iPhoneでレイアウトが崩れた時に試してみたこと

この記事は約 1 分で読めます。 今まではWebサイト制作は、PCでの表示だけを意識して作っていたのですが、最近iPadやiPhone・Androidでのアクセスが増えて、お仕事の依頼もPCだけでなく …

no image

OS+ブラウザごとのcssが簡単に書けるJavaScript「CSS Browser Selector」

この記事は約 1 分で読めます。 「このブラウザだけデザインが崩れてる?!」というのはよくあることで、時々cssにブラウザハックを書かねばならないことがありました。 そんな時、ほんの少しcssでクラス …