GoogleマップAPI v3で地図とマーカー・バルーンを表示プログラムのバグ修正 | ブログトップ | API関連 | JavaScript関連 | GoogleマップAPI v3で地図とマーカー・バルーンを表示（複数版） version1.3
GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.3
この記事は1年以上前の記事のため、内容が古い可能性があります。
今回のバージョンでは住所から座標を取得できるようにしました。（まずはサンプル）
手順
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'>
住所：<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>
</div>
<div id="map" style="width:500px;height:500px;"></div>
<div class='clear'></div>
ここで必要なものは
- id="gmap_data"：このIDを元にバルーンとマーカー用データを取得します。
- class="gmap_title"＋aタグ：タイトルをクリックしたときに吹き出しを表示します。
【追記】 - class="gmap_address"：住所。この住所を元に座標へ変換します。
- id="map"：ここにマップが表示されます。必ずwidthとheightを指定してください。
となっています。住所から座標を取得する場合は、マーカー座標＝中心座標となり、ズーム値はデフォルトで設定している値（15）となります。
もちろんこれまでのバージョン同様、座標データからマーカーを表示することもできます。その場合は前バージョンと同じく「class="gmap_coord"」を含んだタグを追記してください。
<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>
class="gmap_coord"の中の座標は
マーカー緯度,マーカー経度,中心座標緯度,中心座標経度,ズームレベル
または
マーカー緯度,マーカー経度,ズームレベル
または
マーカー緯度,マーカー経度
となっています。（座標についてはこちらから手動で取得できます）
中心座標を設定しない場合は、マーカーの座標が中心点となります。
ズーム値を設定しない場合は、デフォルトのズーム値（15）が使用されます。
２．以下のスクリプトをダウンロードしてください。
自作のマップ表示用スクリプト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_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;
}
以上です。
バグなどありましたらご連絡いただけるとありがたいです。
■追記
class="gmap_title"を忘れると、エラー警告が出ることに気付いたので、付け加えました。
今回参考にさせていただいたサイト
nandani | 2010年10月30日 | コメント(0) | トラックバック(7) | API関連 | JavaScript関連
トラックバック
トラックバックURL
トラックバック一覧
[...] < GoogleマップAPI v3で地図とマーカー・バルーンを表示（個別版） version1.3 | ブログトップ | JavaScript関連 | [...]
[...] 個別版の記事 [...]
[...] 個別版の記事 [...]
[...] 個別版の記事 [...]
[メモ]地名からその場所の地図画像を手軽に表示する方法...
Google Static Map を使って地名からその場所の地図の画像を表示する方法。 画像なので携帯端末でも表示可能です。 Maps API キーの必要がないので、手軽に地図画像を表示したいときに。 ソースコード <?php $address = "東京駅"; $address2 = urlencode($addre...
[...] ※個別版の記事はありませんが、もちろん個別版でもご利用いただけます。「スクリプトの設定」と「map.js」へのパスが変わる（google_map_apiフォルダの中に入るため）部分以外は、前バージョンと同じです。 [...]
[...] 「スクリプトの設定」と「map.js」へのパスが変わる（google_map_api_jsフォルダの中に入るため）部分以外は、前バージョンと同じです。 [...]
コメントする
※メールアドレスが公開されることはありません。