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サイトでRSSフィードボタンを設置してみた♪

この記事は約 1 分で読めます。 何気にWebサイトで、オレンジ色のRSSフィードボタンを見掛けます。 Webサイトの新着情報配信をする為のものなんですが、私のサイトでは今までボタンを設置してませんで …

no image

WordPress 新着記事のタイトルを表示する方法。

この記事は約 1 分で読めます。 WordPressのテンプレートタグ、いろいろあって奥が深いです。 今回は、トップページやサイドバーに「新着記事のタイトル」を数件表示したりする時に使いたいなぁと思っ …

no image

WordPress カスタムフィールドを使ってみる

この記事は約 1 分で読めます。 WordPressの便利な機能のひとつ「カスタムフィールド」に今回チャレンジします♪ 「カスタムフィールド」は、記事本文とは別に項目を独自で作って表示するものです。

no image

透明画像を置いて画像をコピーガードする。

この記事は約 2 分で読めます。 今回は画像の上に透明画像を置く事で元の画像を右クリックで保存出来ないようにするテクニックです。 まずは、デモ画面を見て頂きましょうか・・・。 【2016.6.2】一部 …

no image

WordPressプラグイン「WP-PageNavi」でページナビゲーションを表示♪

この記事は約 1 分で読めます。 このサイトを作り始めて1年になりました。 WordPress初心者で、毎日「?」の繰り返しでした。 そんな私も、気がつくと・・・投稿記事が100を超え、「新しい記事へ …