情報ウィンドウは常に一つ。マーカー移動も。

情報ウィンドウがクリックしただけ表示されるので、一つにしたいのです。
あと、HTMLに地点リストを表示して、その地点リストをクリックしたら、その地点のマーカーを中心にしてウィンドウが開くようにしたい!

<a href="javascript:void(0)" onclick="initialize(1); return false;">□□□□</a>
//データを入れる
var data = [
            [-34.397,150.644,"marker1.png","タイトル1","バルーン",1],
            [-34.882,150.648,"marker2.png","タイトル2","バルーン",2]
            ];

//ウィンドウを記憶
var currentInfoWindow = null;

function initialize(num)
{
	var myOptions = {
	  zoom: 8,
	  center: new google.maps.LatLng(data[num][0], data[num][1]),
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};

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

	for (var i = 0; i < data.length; i++){
		createMarker(i,map);
	}

	//初期値が0出なかったら特定の場所にウィンドウを出す。
	if(num != 0){
		clickid(num,map);
	}
}

function createMarker(num,map) {

	var myLatlng = new google.maps.LatLng(data[num][0], data[num][1]);
	var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      icon: data[num][2]
	  });
	var contentString =  data[num][3]+
    '<p><a href="#" target="_blank">参照Webサイト</a></p>';

    var infowindow = new google.maps.InfoWindow({
    content: contentString
     });

	google.maps.event.addListener(marker, 'click', function() {

		//先に開いた情報ウィンドウがあれば、closeする
		if (currentInfoWindow) {
			currentInfoWindow.close();
		}
	      infowindow.open(map,marker);
	      currentInfoWindow = infowindow;
	    });
	}



function clickid(num,map){

	var myLatlng = new google.maps.LatLng(data[num][0], data[num][1]);
	var marker = new google.maps.Marker({
	      position: myLatlng,
	      map: map,
	      icon: data[num][2]
	  });

	var contentString =  data[num][3]+
    '<p><a href="#" target="_blank">参照Webサイト</a></p>';

	var infowindow = new google.maps.InfoWindow({
	content: contentString
	 });

	//先に開いた情報ウィンドウがあれば、closeする
	if (currentInfoWindow) {
		currentInfoWindow.close();
	}
      infowindow.open(map,marker);
      currentInfoWindow = infowindow;

}

重複しているところもあるけど、ひとまず動いている……。今日はここでおしまい!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です