2011.05.14：最新版version1.4bができました。
今回のバージョンでは住所から座標を取得できるようにしました。（まずはサンプル）
ちなみに改良したプログラムはv1.2の改良版のため、バルーン複数表示はできなくなっています。
手順
1.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが４件ほどデータを入れます。（以下例）
<ul id="gmap_list">
<li>
<div class='gmap_title'><a name="gmap_title">アロチ本家丸高</a></div>
<div class='gmap_photo'><img src="img/marutaka.jpg" width="120" alt="京橋幸太郎" /></div>
<div class='gmap_info'>
<span class='gmap_address'>和歌山県和歌山市友田町2-50</span><br />
TEL：073-432-3313<br />
営業時間：17:30～3:00<br />
定休日：日曜
</div>
<div class='clear'></div>
<div class='gmap_description'>
醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
</div>
</li>
<li>
<div class='gmap_title'><a name="gmap_title">井出商店</a></div>
<div class='gmap_photo'><img src="img/yamatame.jpg" width="120" alt="山為食堂" /></div>
<div class='gmap_info'>
<span class='gmap_address'>和歌山県和歌山市田中町4-84</span><br />
TEL：073-424-1689<br />
営業時間：11:30～23:30<br />
定休日：木曜（年始休）
</div>
<div class='clear'></div>
<div class='gmap_description'>
和歌山ラーメンの名を全国に知らしめたのがこちらの店。
</div>
</li>
<li>
<div class='gmap_title'><a name="gmap_title">まるイ</a></div>
<div class='gmap_photo'><img src="img/marui.jpg" width="120" alt="まるイ" /></div>
<div class='gmap_info'>
<span class='gmap_address'>和歌山県和歌山市中之島2323</span><br />
TEL：073-427-2662<br />
営業時間：平日19:00～翌3:00/土19:00～翌4:00<br />
定休日：日曜
</div>
<div class='clear'></div>
<div class='gmap_description'>
全国から集まる麺ファンを虜にするこんもりと盛られたネギの山！
</div>
</li>
<li>
<div class='gmap_title'><a name="gmap_title">ラグマン</a></div>
<div class='gmap_photo'><img src="img/raguman.jpg" width="120" alt="ラグマン" /></div>
<div class='gmap_info'>
<span class='gmap_address'>和歌山県和歌山市黒田258-7 玉置マンション1F</span><br />
TEL：073-475-1200<br />
営業時間：12:00～14:00/17:30～23:30 <br />
定休日：水曜日
</div>
<div class='clear'></div>
<div class='gmap_description'>
“らぐまん”ならではのオリジナルラーメンは、34種類！レゲエが流れるログハウス作りのオシャレなお店。
</div>
</li>
</ul>
<div id="map" style="width:500px;height:500px;"></div>
<div class='clear'></div>
※それのぞれに情報は必ずリスト形式にしてください。
ここで必要なものは
- id='gmap_list'：このIDを元にバルーン、マーカー用データを取得します。必ず「ul」または「ol」につけてください。
- class="gmap_title"＋aタグ：タイトルをクリックしたときに該当するマーカーの吹き出しを表示します。【追記】
- class="gmap_address"：このclass名を元に住所を取得し、座標に変換します。
- id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。
となっています。
もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。
<li>
<div class='gmap_title'><a name='gmap_title'>アロチ本家丸高</a></div>
<div class='gmap_photo'><img src='img/marutaka.jpg' width='120' alt='京橋幸太郎' /></div>
<div class='gmap_info'>
和歌山県和歌山市友田町2-50<br />
TEL：073-432-3313<br />
営業時間：17:30～3:00<br />
定休日：日曜
</div>
<div class='clear'></div>
<div class='gmap_description'>
醤油でひと煮立ちさせ、一晩寝かせた豚骨でとったスープはコクが生かされクセになる味
</div>
<div class='gmap_coord'>
34.2326948,135.1848098
</div>
</li>
class="gmap_coord"の中の座標は
マーカー緯度,マーカー経度
となっています。（座標についてはこちらから手動で取得できます）
※ここで注意点。
マーカー座標を設定する際、以下のパターンが考えられます。
- すべて住所から座標に変換する場合。（gmap_addressのみ）
- すべて座標を「gmap_coord」に用意しておく場合。（gmap_coordのみ）
- 住所から変換するものと、座標が用意されているものが混ざっている場合（gmap_address＋gmap_coord）
1.の方法では、各項目（<li>内部の記述）の中に「gmap_address」を設定すればOKです。
（この場合「gmap_coord」は必要ありません。）サンプル
2.の方法についても、各項目の中に「gmap_coord」を設定すれば問題ありません。
（この場合「gmap_address」は必要ありません。）サンプル
問題は3の方法について。
一度でも住所から座標を取得する項目がある場合は、すべての項目に「class="gmap_address"」を設定してください。その中で「class="gmap_coord"」がある場合は、そちらが優先されます。
つまり「class="gmap_address"」はとりあえずすべての項目の住所に設定しておき、座標に微調整を加えたいなどの項目がある場合のみ、それに「class="gmap_coord"」をつけて設定する、という感じで設定してください。
サンプル
上記のサンプルはどれも見た目変わりませんが、ソースがそれぞれ違いますので各ページのソースをご覧ください。
２．以下のスクリプトをダウンロードしてください。
自作のマップ表示用スクリプトv3版
- 自作のマップ表示用スクリプトv3版（個別版と同じものです）
map.js（ダウンロードページへ） - jquery.js（ダウンロードサイトへ）
３．htmlファイルのheadタグに上記のファイルとGoogleMapAPIを読み込んでください。
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="js/map.js"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
※スクリプトファイルはダウンロード後、「js」フォルダに入れていると仮定して記述しています。
※ダウンロードした「map.js」は、「map_v1.3.js」のようにバージョンナンバーが付いているので、ファイル名を変更するか、上記の読み込み部分の記述を変更してください。
４．bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="map_all('map','gmap_list')">
map_allの引数について
- 第一引数：マップを表示するタグのID（今回はmap）
- 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）
これで、マーカー・バルーン付きマップが表示できます。
５．スタイルを整えます。以下をheadタグ内に記述するか、別ファイルに保存してheadタグで埋め込んでください。（スタイルシートのダウンロードはこちら）
#map{
float:left;
}.clear{
clear:both;
}/*吹き出しのスタイル*/
.gmap_block{
width:320px;
}
.gmap_block .gmap_title{
font-size:100%;
font-weight:bold;
margin-bottom:10px;
}.gmap_block .gmap_photo{
float:right;
margin-left:10px;
overflow:hidden;
}.gmap_block .gmap_info{
font-size:75%;
}.gmap_block .gmap_description{
font-size:75%;
margin-top:10px;
}
/*お店の情報（個別用）*/
#gmap_data{
float:left;
margin-right:10px;
width:320px;
}#gmap_data .gmap_photo{
float:left;
width:130px;
}#gmap_data .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_data .gmap_info,
#gmap_data .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_data .gmap_description{
padding-top:5px;
}/*お店の情報（リスト用）*/
#gmap_list{
width:300px;
height:500px;
overflow:scroll;
float:left;
margin:0px;
padding:0px;
}#gmap_list li{
list-style-type:none;
margin:0px 0px 20px 0px;
padding:0px;
}#gmap_list .gmap_photo{
float:left;
width:130px;
}#gmap_list .gmap_title{
font-size:100%;
font-weight:bold;
line-height:1.5em;
}#gmap_list .gmap_title a{
color:#0000FF;
text-decoration: underline;
cursor:pointer;
}#gmap_list .gmap_info,
#gmap_list .gmap_description{
font-size:75%;
line-height:1.5em;
}#gmap_list .gmap_description{
padding-top:5px;
}.gmap_coord{
display:none;
}
以上です。
バグなどありましたらご連絡いただけるとありがたいです。
【追記】
class="gmap_title"を忘れると、エラー警告が出ることに気付いたので、付け加えました。
【追記：2011/03/22】
10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるというバグが見つかりました。
現段階でこのバグの修正は行われておりません。
このスクリプトを利用されている方は申し訳ございませんが、10件マーカーを表示する必要がある場合は、旧来通りgmap_coordに座標を記述する方式を取ってください。
なお、座標の取得については
https://nandani.sakura.ne.jp/jstest/googlemapapi/map_set.html
のページをご利用ください。
【追記：2011/03/26】
マーカー数が少ないと、ズームが寄り過ぎる問題点について解決したスクリプトをアップロードしました（map_v1.3.1.js）
ズームの最大値の調整は、map_v1.3.1.jsの15行目にある「zoom_max」の値を調整してください。
スクリプトのダウンロードページへ。
【追記：2011/05/14】
10件以上住所による座標取得を行おうとすると、途中でマーカーが表示されなくなるという問題点を解決したバージョンをアップロードしました。
詳しくはこちらのページをご覧ください。
GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.4b