GoogleマップAPIで地図とマーカー・バルーンを表示（個別版） | ブログトップ | JavaScript関連 | WordPressのカスタムフィールドでGoogleMAPその１
GoogleマップAPIで地図とマーカー・バルーンを表示（複数版）
この記事は1年以上前の記事のため、内容が古い可能性があります。
座標データを元に、公開用マップ（マーカー・バルーン付き）を表示します。今回は１マップに複数のマーカーを表示します。（まずはサンプル）
手順
１．例によってあらかじめAPIキーを取得してください。
Google MAPS API に登録する （Google Maps API）
２．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'>
和歌山県和歌山市友田町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"の中の座標は
マーカー緯度,マーカー経度
となっています。（座標についてはこちらから手動で取得できます）
なお、個別版では、この後に「中心座標緯度,中心座標経度,ズームレベル」が記述されていましたが、複数版ではマーカーの座標しか使用しません（記述されていても問題ありませんが反映はされません）。中心座標、ズームレベルについてはすべてのマーカーが表示されるように自動的に調整されます。
３．今回はhtml内に記述せず、javascriptを外部ファイルに記述し、それを読み込むようにしました。読み込むファイルは以下の３つです。
- 自作のマップ表示用スクリプト
map.js（ダウンロードページへ） - getElementsByClassNameをIEでも使用できるようにするスクリプト。
getElementsByClassName.js（ダウンロードサイト）
または
prototype.js（ダウンロードサイト） - GoogleMapAPI（キーがあればダウンロードの必要ありません）
htmlファイルのheadタグに上記のファイルを読み込んでください。（APIキーは１．で取得したものを記述してください。）
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="js/getElementsByClassName.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=（APIキー）" type="text/javascript"></script>
※metaタグで文字コードをutf-8にするのを忘れずに。これがないと正常に動作しない場合があります。
４．bodyタグのonloadにて、マップ表示用関数を呼び出します。
<body onload="all_marker_map('map','gmap_list')">
all_marker_mapの引数について
- 第一引数：マップを表示するタグのID（今回はmap）
- 第二引数：バルーン情報が入っているリストタグのID（今回はgmap_list）
これで、マーカー・バルーン付きマップが表示できます。
５．しかし前回同様このままだとレイアウトがおかしくなります。そこでスタイルにて座標情報を非表示にし、バルーンのレイアウトをGoogleマップ風にします。
以下スタイル（ダウンロードの場合はこちら）
#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;
}
これで複数の情報を１枚のマップに表示できます。バルーンを表示する場合はマーカーをクリックするか、左の店名をクリックしてください。
今回の記事で参考にさせていただいたサイト
トラックバック
トラックバックURL
トラックバック一覧
[...] < GoogleマップAPIで地図とマーカー・バルーンを表示（複数版） | ブログトップ | WEB関連全般 | [...]
[...] GoogleマップAPIで地図とマーカー・バルーンを表示（複数版） [...]
[...] こちらの記事のGoogleMapAPI v3版です。（まずはサンプル） [...]
コメントする
※メールアドレスが公開されることはありません。