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

<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'>
            和歌山県和歌山市友田町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>
    <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'>
            和歌山県和歌山市田中町4-84<br />
            TEL：073-424-1689<br />
            営業時間：11:30～23:30<br />
            定休日：木曜（年始休）
        </div>
        <div class='clear'></div>
        <div class='gmap_description'>
            和歌山ラーメンの名を全国に知らしめたのがこちらの店。
        </div>
        <div class='gmap_coord'>
            34.2284871,135.1894984
        </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'>
            和歌山県和歌山市中之島2323<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>
        <div class='gmap_coord'>
            34.2357444,135.1855124
        </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'>
            和歌山県和歌山市黒田258-7 玉置マンション1F<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>
        <div class='gmap_coord'>
            34.2359753,135.197503
        </div>
    </li>
</ul>

<div id='map' style='width:500px;height:500px;'></div>
<div class='clear'></div>

※それのぞれに情報は必ずリスト形式にしてください。

ここで必要なものは

id='gmap_list'：このIDを元にバルーン、マーカー用データを取得します。必ず「ul」または「ol」につけてください。
class="gmap_coord"：このclass名を元に座標情報を取得します。
id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

class="gmap_coord"の中の座標は

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

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

なお、個別版では、この後に「中心座標緯度,中心座標経度,ズームレベル」が記述されていましたが、複数版ではマーカーの座標しか使用しません（記述されていても問題ありませんが反映はされません）。中心座標、ズームレベルについてはすべてのマーカーが表示されるように自動的に調整されます。

２．以下のスクリプトをダウンロードしてください。なおv2版の記事では「getElementsByClassName.js」を使用していましたが、今回は「jQuery」を使用します。

自作のマップ表示用スクリプトv3版
map.js（バージョンv1.1.1 or 1.2.1のダウンロードはこちらから）
jquery.js（ダウンロード）

※map.jsは個別版で配布しているものと同じスクリプトです。

３．htmlファイルのheadタグに上記のファイルを読み込んでください。

<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」フォルダに入れていると仮定して記述しています。

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

<body onload="map_all('map','gmap_list')">

map_allの引数について

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

これで、マーカー・バルーン付きマップが表示できます。

※v2では関数名を「all_marker_map」としていましたが、今回は「map_all」に名前を変更しました。

５．スタイルを整えます。以下を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;
}

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

以上です。

今回参考にさせていただいたサイト

Google Maps API Version3 日本語ドキュメント(非公式)：該当記事「Google Maps API Version3 イベント」
Life with IT：該当記事「「TOKYO ART LIFE」のGoogle Maps API V3対応」

タグ：: API; GoogleMap

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

■新バージョンに関する追記（2010/10/30）

新バージョンv1.3を追加しました。
今後ご利用の方はこちらの記事をお読みください。

新バージョンv1.3の「個別版」の記事を読む

新バージョンv1.3の「複数版」の記事を読む

こちらの記事のGoogleMapAPI v3版です。（まずはサンプル）

v3ではなんと、

APIキーが必要ない！
iPadでも拡大移動が可能！
GPS機能が使える！
マーカーの吹き出しが複数表示できる！

などの変更点がありました。スクリプトの記述方法もかなり変わってますが、html側の記述はほぼ変わりません。

手順

1.bodyタグに、バルーン用情報を記述します。（以下例）

<div id='gmap_data'>
    <div class='gmap_title'><a name='gmap_title'>井出商店</a></div>
    <div class='gmap_photo'><img src='img/ide.jpg' width='120' alt='井出商店' /></div>
    <div class='gmap_info'>
        住所：和歌山県和歌山市田中町4-84<br />
        TEL：073-424-1689<br />
        営業時間：11:30～23:30<br />
        定休日：木曜（年始休）
    </div>
    <div class='clear'></div>
    <div class='gmap_description'>
        和歌山ラーメンの名を全国に知らしめたのがこちらの店。
    </div>
    <div class='gmap_coord'>
       34.2284871,135.1894984,34.23075140779955,135.19043684005737,16
    </div>
</div>

<div id='map' style="width:500px;height:500px;"></div>

<div class='clear'></div>

ここで必要なものは

id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
class="gmap_coord"：このclass名を元に座標情報を取得します。
id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。

class="gmap_coord"の中の座標は

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

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

２．以下のスクリプトをダウンロードしてください。なおv2版の記事では「getElementsByClassName.js」を使用していましたが、今回は「jQuery」を使用します。

自作のマップ表示用スクリプトv3版
map.js（バージョンv1.1.1 or 1.2.1のダウンロードはこちらから）
jquery.js（ダウンロード）

３．htmlファイルのheadタグに上記のファイルを読み込んでください。

<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」フォルダに入れていると仮定して記述しています。

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

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

map_singleの引数について

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

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

５．スタイルを整えます。以下を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_coord{
display:none;
}