| ブログトップ | API関連 | JavaScript関連 |

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

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

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

 

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

 

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

 

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

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

map_singleの引数について

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

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

 

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

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

以上です。

 

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

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

トラックバック

トラックバックURL

トラックバック一覧

[...] < GoogleマップAPI v3で地図とマーカー・バルーンを表示(個別版) | ブログトップ | JavaScript関連 | [...]

[...] ※v3版を追加しました。 [...]

[...] ※なお上記のプログラム「map_v1.1.js」「map_v1.2.js」は「個別用」でも利用できます。 [...]

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記