GoogleMapSample11:複数のマーカーを表示（応用編）

by

Sample8の応用スクリプト。リンクをクリックしたら対応したマーカーを表示する。
支店マップとか散策マップみたいな用途に向いてる。


var map;

window.onload = function() {
	if (GBrowserIsCompatible()) {
		map = new GMap2(document.getElementById("map"));
		var point =new GLatLng(35.681099,139.767084);
		var marker = new GMarker(point);
		map.setCenter(point, 14);
		map.addOverlay(marker);
		map.addControl(new GMapTypeControl());
		map.addControl(new GLargeMapControl());

	}

}
//panTo & openInfoWindow 
	
function office(i) {
	var latlng = new GLatLng( area[i].lat, area[i].lng );
	var mark = new GMarker( latlng );
	map.clearOverlays();
	map.panTo(latlng);
	map.addOverlay( mark );
    mark.openInfoWindowHtml( '<p>'+ area[i].name + '<br />' + area[i].text+'<br />TEL:'+area[i].tel+'&nbsp;&nbsp;FAX:'+area[i].fax+'</p>');
}
var area =[
			 
{ name:'新宿御苑' ,lat:35.687038, lng:139.710688, text:'〒000-0000　東京都', tel:'0120-123-4567', fax:'0120-123-4568'},
{ name:'東京ビッグサイト', lat:35.630028, lng:139.793839,text:'〒000-0000　東京都',tel:'0120-123-4567',fax:'0120-123-4568' },
{ name:'羽田空港' ,lat:35.549922, lng:139.786216, text:'〒000-0000　東京都', tel:'0120-123-4567', fax:'0120-123-4568'},
{ name:'表参道ヒルズ', lat:35.667213, lng:139.708961, text:'〒000-0000　東京都', tel:'0120-123-4567', fax:'0120-123-4568'},
{ name:'東京タワー', lat:35.658587, lng:139.745428, text:'〒000-0000　東京都', tel:'0120-123-4567', fax:'0120-123-4568'}
]

<ul>
<li><a href="javascript:office(0)">新宿御苑</a></li>
<li><a href="javascript:office(1)">東京ビッグサイト</a></li>
<li><a href="javascript:office(2)">羽田空港</a></li>
<li><a href="javascript:office(3)">表参道ヒルズ</a></li>
<li><a href="javascript:office(4)">東京タワー</a></li></ul>
<div id="map"><!--GoogleMap--></div>

var map = new GMap2(document.getElementById("map"));
地図を表示する要素のIDを指定する。

var point =new GLatLng(35.681099,139.767084);
初期の中心位置。

function office(i)
リンクをクリックしたとき呼ばれるメソッド。引数iは配列areaの並び順とリンクする。

var latlng = new GLatLng( area[i].lat, area[i].lng );
area[i].lat　で要素にアクセスしています

map.clearOverlays();
移動する前に消去。

map.panTo(latlng);
引数で指定した位置まで移動させる

var array =[];に並ぶ配列はいくつでも追加出来ます。やりすぎると重いが…
また各配列の要素も増減できるので、表示したい情報にあわせて編集すればおｋ。

これ作ったときポイントが90くらいあって、配列の方はテーブルソースからの置換、
HTMLのoffice()に入れる連番はPHPでやったので、それもついでに載せときます。

上の配列の名前の所を置換で変換してＰＨＰの配列を作る。

<?php
$array =array(
'<li><a href="javascript:office()">新宿御苑</a></li>',
'<li><a href="javascript:office()">東京ビッグサイト</a></li>',
'<li><a href="javascript:office()">羽田空港</a></li>',
'<li><a href="javascript:office()">表参道ヒルズ</a></li>',
'<li><a href="javascript:office()">東京タワー</a></li>'
);//配列最後にカンマはつけない

for($i=0;$i<count($array);$i++){
print preg_replace("/(<li><a href=\"javascript:office\()(.+)/i","$1",$array&#91;$i&#93;);
print $i;
print preg_replace("/(<li><a href=\"javascript:office\()(\)\">)(.*)(<\/a><\/li>)/i","$2$3$4",$array[$i])."\n";
}
?>

preg_replaceでoffice前カッコと後ろカッコ以降に分割して、間に変数$iの値を入れてます。
正規表現の置換はDreamweaverとそう変わらんです。

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。