google map apiとPHPを組み合わせて複数マーカーとウィンドウを連携させる

やりたかった事は、

• mysqlから経度緯度、マーカー名、マーカーIDを持ってきてgooglemapにマーカーを刺す
• マーカーをクリックするとウィンドウが表示
• ウィンドウの中にマーカー名とリンクを表示。リンクは[?key=マーカーID]みたいにクエリをそれぞれつけたい

というもの。

先にソース。

var currentWindow = null;

var latlng = new google.maps.LatLng(<?=$addressList[0]['x']?>,<?=$addressList[0]['y']?>); //初期位置

var myOptions = {
	zoom: 12, 
	center: latlng, 
	mapTypeId: google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //map生成

<?php for($i = 0; $i < count($addressList); $i++){ ?>
	var addressArray = {
		'id':'<?=$addressList[$i]["id"]?>', 
		'name':'<?=$addressList[$i]["name"]?>', 
		'x':'<?=$addressList[$i]["x"]?>', 
		'y':'<?=$addressList[$i]["y"]?>'
	};
	makeMarker(addressArray);
<?php } ?>

//マーカー作成
function makeMarker( addressArray ){
	var marker = new google.maps.Marker({
		position : new google.maps.LatLng(addressArray.x,addressArray.y), 
		map: map
	});
	var addressArray;

	var infoWindow = new google.maps.InfoWindow();
	google.maps.event.addListener(marker, 'click', function() {
		if (currentWindow) {
			currentWindow.close();
		}
		infoWindow.setContent('マーカー名：'+addressArray.name+'<br><a href="detail.php?e='+addressArray.id+'&f=<?=$folder_id?>">詳細はコチラ</a>');
		infoWindow.open(map,marker);
		currentWindow = infoWindow;
	});
}

$addressListに予めMySQLから、マーカー情報を呼び出して配列で突っ込んでおく。

google map apiを初めて使うことになり、何とかなるやろか思ってたけどけっこうむずかった。

mapに出力するところから先に作ったけど、php→mysqlに入れる際にformから住所送って(出来ればajaxで)ジオコーディング？　かなんかでチェックするシステムも作りたいところ。

よく考えたらありがちっぽいので、いいのがあったらぱくろう。