GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.4b

01<div id="gmap_data">
02<div class="gmap_title"><a name="gmap_title">井出商店</a></div>
03<div class="gmap_photo"><img src="img/ide.jpg" width="120" alt="井出商店" /></div>
04<div class="gmap_info">
05住所：<span class="gmap_address">和歌山県和歌山市  田中町4-84</span><br />
06TEL：073-424-1689<br />
07営業時間：11:30～23:30<br />
08定休日：木曜（年始休）
09</div>
10<div class="clear"></div>
11<div class="gmap_description">
12和歌山ラーメンの名を全国に知らしめたのがこちらの店。
13</div>
14</div>
15<div id="map" style="width:500px;height:500px;"></div>
16<div class="clear"></div>

ここで必要なものは

id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
class="gmap_title"＋aタグ：タイトルをクリックしたときに吹き出しを表示します。
class="gmap_address"：住所。この住所を元に座標へ変換します。
id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

となっています。住所から座標を取得する場合は、マーカー座標＝中心座標となり、ズーム値はデフォルトで設定している値（スクリプト設定参照）となります。

もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。

01<div id="gmap_data">
02<div class="gmap_title"><a name="gmap_title">井出商店</a></div>
03<div class="gmap_photo"><img src="img/ide.jpg" width="120" alt="井出商店" /></div>
04<div class="gmap_info">
05住所：和歌山県和歌山市田中町4-84<br />
06TEL：073-424-1689<br />
07営業時間：11:30～23:30<br />
08定休日：木曜（年始休）
09</div>
10<div class="clear"></div>
11<div class="gmap_description">
12和歌山ラーメンの名を全国に知らしめたのがこちらの店。
13</div>
14<div class="gmap_coord">
1534.2284871,135.1894984,34.23075140779955,135.19043684005737,16
16</div>
17</div>
18 
19<div id="map" style="width:500px;height:500px;"></div>
20 
21<div class="clear"></div>

class="gmap_coord"の中の座標は

マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル

または

マーカー緯度,マーカー経度,ズームレベル

または

マーカー緯度,マーカー経度

となっています。（座標についてはこちらから手動で取得できます）

中心座標を設定しない場合は、マーカーの座標が中心点となります。
ズーム値を設定しない場合は、デフォルトのズーム値が使用されます。（スクリプト設定参照）

２．以下のスクリプトをダウンロードしてください。

自作のマップ表示用スクリプト【Google Map API v3版】
google_map_api_js.zip（ダウンロードページへ）
jquery.js（ダウンロードサイトへ）

３．スクリプトの設定を行います。

google_map_api_js.zipをダウンロードしましたら、解凍してください。「google_map_api_js」というフォルダができます。

フォルダの中には

get_coord.php
map_function.php
map.js

の３ファイルが入っています。

map.jsをプログラムが編集できるテキストエディタで開き、26行目付近の

`26`	`var` `php_path =` `"js/v1.4b2/google_map_api_js/get_coord.php";`

の部分に、「get_coord.php」までのURLパスを記述してください。

例えば、ウェブルートの「js」フォルダに「google_map_api_js」フォルダをまるごとアップロードする場合は

`26`	`var` `php_path =` `"http://ドメイン/js/google_map_api_js/get_coord.php";`

となります。

また、16～21行目付近にかけて、座標やズーム値の初期値を設定できます。（個別版の場合、特に指定がない場合はここで設定するズーム値（zoom）になるので、ご注意ください。）

16var mc_lat = 34.6862971;    //中心座標の緯度（初期値）
17var mc_lng = 135.5196609;    //中心座標の経度（初期値）
18var mp_lat = 34.6862971;    //マーカーの緯度（初期値）
19var mp_lng = 135.5196609;    //マーカーの経度（初期値）
20var zoom = 5;        //ズーム値（初期値）
21var zoom_max = 15;    //ズームの最大値（MAX20 MIN1）寄り過ぎを防ぐ

以上の設定が終わりましたら、「google_map_api_js」フォルダをまるごとサーバにアップロードしてください。ただし、上記で設定した通り、map.jsには「get_coord.php」までのパスが記述されているので、それに沿った場所にアップロードしてください。

また、「google_map_api_js」フォルダには、CSVファイルを書き出す必要があるため、パーミッションを777にするなど、書き込み権限をつけてください。

４．htmlファイルのheadタグにjqueryとmap.js、Google Map APIを読み込んでください。

1<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
2<script type="text/javascript" src="js/jquery.js"></script>
3<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
4<script type="text/javascript" src="js/google_map_api_js/map.js"></script>

※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※「jquery」とスクリプトファイル一式（「google_map_api_js」フォルダ）は、「js」フォルダにアップロードしたと仮定して記述しています。

５．bodyタグのonloadにて、マップ表示用関数を呼び出します。

`1`	`<body` `onload="map_single('map','gmap_data')">`

map_singleの引数について

第一引数：マップを表示するタグのID（今回はmap）
第二引数：バルーン情報が入っているタグのID（今回はgmap_data）

これで、マーカー・バルーン付きマップが表示できます。（マーカーをクリックするとバルーンが表示されます）

６．スタイルを整えます。以下をheadタグに記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）

01#map{
02float:left;
03}
04 
05.clear{
06clear:both;
07}
08 
09/*吹き出しのスタイル*/
10.gmap_block{
11width:320px;
12}
13.gmap_block .gmap_title{
14font-size:100%;
15font-weight:bold;
16margin-bottom:10px;
17}
18 
19.gmap_block .gmap_photo{
20float:right;
21margin-left:10px;
22overflow:hidden;
23}
24 
25.gmap_block .gmap_info{
26font-size:75%;
27}
28 
29.gmap_block .gmap_description{
30font-size:75%;
31margin-top:10px;
32}
33/*お店の情報（個別用）*/
34#gmap_data{
35float:left;
36margin-right:10px;
37width:320px;
38}
39 
40#gmap_data .gmap_photo{
41float:left;
42width:130px;
43}
44 
45#gmap_data .gmap_title{
46font-size:100%;
47font-weight:bold;
48line-height:1.5em;
49}
50 
51#gmap_data .gmap_info,
52#gmap_data .gmap_description{
53font-size:75%;
54line-height:1.5em;
55}
56 
57#gmap_data .gmap_description{
58padding-top:5px;
59}
60 
61.gmap_coord{
62display:none;
63}

サンプル [新しいウィンドウで開く]

以上です。

バグなどありましたらご連絡いただけるとありがたいです。

タグ：: GoogleMap; GoogleMapAPI

トラックバック

トラックバックURL

トラックバック一覧

1. google_map_api_js.zipをバージョンアップしました[バージョン1.4b2] | ダリの雑記：WEBプログラム版 | 2011年08月13日 5:42 PM

[...] 使い方はこちら：マーカー個別版・マーカー複数板 [...]

2. WordPressのカスタムフィールドでGoogleMAPその２ | ダリの雑記：WEBプログラム版 | 2011年08月24日 4:44 PM

[...] GoogleマップAPIで地図とマーカー・バルーンを表示（個別版） [...]

3. マップ表示用スクリプトをバージョンアップしました[バージョン1.4b3] | ダリの雑記：WEBプログラム版 | 2011年11月11日 8:35 PM

[...] ■使い方はこちら：マーカー個別版・マーカー複数板 [...]

4. マップ表示用スクリプト【Google Map API v3版】を修正しました。[version1.4b4] | ダリの雑記：WEBプログラム版 | 2012年06月30日 5:09 PM

[...] ■使い方を見る：マーカー個別版・マーカー複数板 [...]

コメント一覧

1. Posted by kou 2012年07月02日

貴サイトを利用させて頂いておりますkouと申します。

HTML内の住所から地図を表示したかったので、非常に助かります。
分かりやすい解説で私の様な初心者にも表示は出来ましたが…初期値の var zoom = 5; の数値を変えても初期表示が日本列島になってしまいます。対策がございましたら、ご指導頂けますようお願い致します。

2. Posted by nandani 2012年07月02日

kouさん。
コメントありがとうございます。
var zoom = 5;はズーム値の設定ですので、座標の初期値設定を変更する場合は、16行目付近にある
var mc_lat = 34.6862971; //中心座標の緯度（初期値）
var mc_lng = 135.5196609; //中心座標の経度（初期値）
を変更してください。

座標の取得についてはこちらのページをご利用ください。
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
上記のフォームに住所を入れると下にマーカー座標が表示されます。

3. Posted by kou 2012年07月03日

早々の返信ありがとうございます。
「初期表示が日本列島」と言うのはかなり広い地域が表示されてしまうと言う意味で、表示地域に付いては住所をきっちり読み込んで表示してくれています^^　ただ、あまりにも広い地域なので大阪も京都も同じような地点がマークされてしまっています。zoomにしようとvar zoom = 5;を変えても反応してくれません。対策がございましたら、ご指導頂けますようお願い致します。

4. Posted by kou 2012年07月03日

数値を書き直しても動作しなかったのはリロードが上手くいってなかったようです…　先程もう一度試すと上手くいきました。大感謝です。今後とも宜しくお願いしますm(__)m

5. Posted by nandani 2012年07月03日

kouさん。

質問の意図を勘違いしてすみません;
無事解決したようでよかったです^^

6. Posted by pjxx 2012年11月12日

はじめまして。pjxxと申します。
こちらのプログラムを更新の度に利用させていただいております。

とても単純な質問なのですが、
ズームの寄り過ぎを防ぐzoom_maxがver1.3.1より追加されていますが、
指定しても反映されないようです。
前後の初期ズーム値等は問題なく指定できるのですが、
何か原因があるのでしょうか？
未リロード等のミスではないようです。

お忙しいかとは思いますが、是非ともコメントをよろしくお願いいたします。

7. Posted by pjxx 2012年11月18日

上記のzoom_maxが反映されない件についてですが、
Google Chromeでのみ表示されないようです。
私の能力では根本の解決には時間がかかりそうですが、
報告させていただきました。
これからも宜しくお願い致します。

8. Posted by nandani 2012年12月13日

pjxxさん。
コメントありがとうございます。
返事が遅くなり大変申し訳ございません。
もう見てないかもしれませんが、念のため回答させていただきます。
version1.4b4をテストしたところ、Chrome正常に動作しているようです。
もしかして「map_single」関数をご利用でないでしょうか？
こっちの関数はマーカー１つ用で、特に指定がない限り「zoom」の設定を優先します。（zoom_maxは使用しません。）
「map_all」関数の場合は、たとえばマーカーが１つしかない場合などは「zoom_max」が優先されます。
未リロードではないとすると、上記の理由か、もしかしたらChromeのバージョンの違いかもしれません。
現在でも同様の問題は起きますでしょうか。

9. Posted by heypola 2015年04月08日

このプログラムを大変便利に利用させて頂いております。ありがとうございます。
質問ですが、この個別版で、最初からバルーンが表示された状態にすることは可能でしょうか？
可能であればその方法を教えていただければと思います。
よろしくお願いします。

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL

ダリの雑記：WEBプログラム版