https://github.com/maechabin/jquery.cb-getmaps.js

Google Maps Apiを使って地図を表示させるjQueryプラグイン
https://github.com/maechabin/jquery.cb-getmaps.js

Last synced: 2 days ago
JSON representation

Google Maps Apiを使って地図を表示させるjQueryプラグイン

• Host: GitHub
• URL: https://github.com/maechabin/jquery.cb-getmaps.js
• Owner: maechabin
• Created: 2014-12-09T13:27:47.000Z (over 11 years ago)
• Default Branch: master
• Last Pushed: 2015-03-18T11:33:23.000Z (about 11 years ago)
• Last Synced: 2025-02-26T17:44:17.913Z (over 1 year ago)
• Language: JavaScript
• Homepage: http://mae.chab.in/archives/2457
• Size: 184 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# jQuery.cb-getmaps.js

##＜概要＞

「住所」「場所名」「緯度経度」から位置情報を取得し、Google Maps APIを使って地図を表示させるjQueryプラグイン

##＜実装方法＞

###1. 外部ファイルを読み込む

jQuery、Google Maps JavaScript API、当プラグインをページに読み込みます。

```html

```

※Google Maps APIの読み込み方については、以下も併せてご確認ください。

[Google Maps JavaScript API v3スタートガイド](https://developers.google.com/maps/documentation/javascript/tutorial?hl=ja)

###2. 位置情報を取得する

「class="cb-getlocation"」を指定した要素のtitle属性に、「住所」、「場所」、「緯度,経度」情報を設定

####ex.1 住所を入力

```html

東京都庁

```

####ex.2 場所を入力

```html

東京都庁

```


####ex.3 [緯度,経度]を入力

```html

東京都庁

```


※緯度経度情報はGooleマップの任意の場所で右クリックし、「ここの場所について」を選択すると表示されます。

###3. 地図を表示する

地図を表示したい要素に「class="cb-mapcanvas"」を指定

####ex.1

```html



```


####ex.2 取得と表示を同じ要素内で行ってもOK

```html



```


###4. 2と3をグループ化する

位置情報の取得用の要素と地図表示用の要素をグループ化し、プラグインを実行するためのセレクター（ここでは「class="cb-getmap"」）を設定

####ex.1 基本スタイル

```html



	
東京都庁

	




```


####ex.2 取得と表示を同じ要素内で行った場合

```html



	




```


###5. プラグインを実行する

位置情報を取得するclass属性cb−getmapを指定した要素のjQueryオプジェクトに対し、cbGetMapsメソッドを指定

```html

$(".cb-getmap").cbGetMaps();

```

####オプション

オプションの指定の仕方は以下の通り

```js

$(".cb-getmap").cbGetMaps({

	map_location_name: ".cb-getlocation",

	map_canvas_name: ".cb-mapcanvas",

	map_canvas_width: "100%",

	map_canvas_height: "120px",

	map_canvas_text: "大きな地図で見る", // タグ使用可

	map_canvas_text_size: "14px",

	map_zoom: 13,

	map_type: "ROADMAP" // ROADMAP, SATELLITE, HYBRID, TERRAIN

});

```

#####オプションの説明



	
map_location_name

	
位置情報を取得するためのtitle属性を指定する要素のClass属性値

	
map_canvas_name

	
地図を表示させる要素のClass属性値

	
map_canvas_width

	
表示させる地図の幅

	
map_canvas_height

	
表示させる地図の高さ

	
map_canvas_text

	
地図の下に表示されるGooleマップへのリンクのアンカーテキスト

	
map_canvas_text_size

	
地図の下に表示されるGooleマップへのリンクのアンカーテキストのサイズ

	
map_zoom

	
表示される地図の縮尺

	
map_type

	
表示される地図のタイプ [ROADMAP], [SATELLITE], [HYBRID], [TERRAIN]



##＜デモ＞

[http://jsrun.it/maechabin/TLmG](http://jsrun.it/maechabin/TLmG)

##＜ライセンス＞

MIT license

##＜アップデート情報＞

###ver. 1.2

- 同一ページ内で複数の別要素に対してプラグインを実行できるようにしました。

- これによりそれぞれの要素にオプションを指定することができるようにしました。

- 位置情報を取得するためのtitle属性を指定する要素を、任意のclass属性値からcb-getlocationに固定しました。

- 位置情報を取得するためのtitle属性を指定する要素のclass属性値をオプションで指定できるようにしました。