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

nandani

14年前

座標データを元に、公開用マップ（マーカー・バルーン付き）を表示します。（まずはサンプル）

手順

１．例によってあらかじめAPIキーを取得してください。

２．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"の中の座標は

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

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

３．今回は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="map_single('map','gmap_data')">

map_singleの引数について

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

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

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

５．しかし、これではレイアウトが整ってませんし座標情報が表示されてしまっています。

座標情報を非表示にし、バルーンのレイアウトを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_coord{
display:none;
}

スタイル適応後のサンプルはこちら

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

スクリプトのベースとなっているのは「GoogleマップAPIで座標取得その２」同様「オレンジ工房 ORANGE-FACTORY」さんのソースです。（結構改造してますが）