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

GoogleマップAPI v3で地図とマーカー・バルーンを表示(複数版)

この記事は1年以上前の記事のため、内容が古い可能性があります。

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

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

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

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


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

 

※【追記】 以下の問題点を解決したバージョンのプログラムを追加しました。

ただ、まだ未完でして左リストのリンクをクリックしてからのバルーン表示機能がまだうまくいってません。

それでもかまわないという方は続きをどうぞ。

 

手順

1.bodyタグに、バルーン用情報を記述します。複数なんでちょっと長くなりますが4件ほどデータを入れます。(以下例)

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

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

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

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

 

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

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

 

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_all('map','gmap_list')">

map_allの引数について

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

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

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

 

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_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;
}

 

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

以上です。

 

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

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

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

LINEで送る

トラックバック

トラックバックURL

トラックバック一覧

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

[...] 前回の問題点である、リンクからバルーンを表示できないという問題点を解決しました。 [...]

コメント一覧

1. Posted by dkstudio   2012年02月12日

カスタムマーカーに変更する部分を教えて下さい。
よろしくお願いいたします。

2. Posted by nandani   2012年02月12日

dkstudioさん、コメントありがとうございます。

最近年度末ということで、なかなかサンプルを作成してご返信する時間ができないため、以前お仕事で設置させていただいたサイトでマーカーを変えて表示するスクリプトを作成しましたので、そちらをご紹介させていただきます。

サイトは、和歌山県温泉協会というサイトのこのページです。
http://www.wakayama-onsen.jp/onsen-map

※なお、このスクリプトのバージョンは1.4b3を元に改良してます。
バージョン1.4b3のダウンロードはこちら
http://www.nandani.sakura.ne.jp/script-download/

具体的な改造点は
http://www.wakayama-onsen.jp/wordpress/wp-content/themes/wakayama-onsen/scripts/google_map_api_js/map.js
を観ていただくとして、主な変更点は
function AddGMarker
のところ。

■map.jsの調整部分
1.影の調整
gmap_marker_shadow_array = new google.maps.MarkerImage(
"(影画像のURL)",
new google.maps.Size(80, 50),
new google.maps.Point(0, 0),
new google.maps.Point(23, 46)
);
マーカーを任意の画像にする場合、影もまた画像にして設定する必要が有ります。
389行目から395行目までの、影画像の設定を行ってください。
具体的には影画像のURLを記述し、SizeとPointを調整します。
Pointの設定は2つありますが、1つめは(0,0)でかまいません。

2.マーカー画像の設定
基本的にはHTML側に記述しているマーカー画像のURLを引っ張ってきて表示する仕組みですが、HTML側に記述されていない場合も考慮し、無い場合に表示する画像を設定します。
373行目と385行目にある「gmap_marker_url」に未設定時用画像のURLを記述してください。

■HTML側の設定部分
<div class="gmap_marker">(マーカー画像のURL)</div>
というタグを用意し、ここにマーカー画像のURLをいれます。
くわしくはこちらのページ
http://www.wakayama-onsen.jp/onsen-map
のソースをご覧ください。
なお、画像を設定しない場合でも
<div class="gmap_marker"></div>
という空のタグをつけてください(順番が狂うため)

以上でカスタムマーカーを表示できるようになるかと思います。
お試しください。

コメントする

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

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