google maps 住所リストからマーカーを複数表示、イベントでポップアップ表示

usemap_list.js

// uses: google maps API v3, jQuery 1.11

(function(){

	var config = {
		zoom: 14, //地図倍率
		// 「熊本市役所」
		center_latitude:32.803066, // 地図の中心 - 緯度
		center_longtitude:130.707849 // 地図の中心 - 経度
	};

	// -------- init-globals
	var center_of_the_map = new google.maps.LatLng(config['center_latitude'], config['center_longtitude']);
	var all_facilities = []; // 住所、タイトル、クリックボタンのセットを格納
	var mapDiv01 = document.getElementById('map_canvas'); // elementを取っておいて、あとで google maps ライブラリに渡す(「ここに表示」)

	// -------- set text and DOM obj into Array
	$(".facility").each(function(){
		var inner_title = $(".fac-title",this).text(); // text
		var inner_address = $(".fac-address",this).text(); // text
		var inner_button = $(".showmap", this).get(0); // DOM object
		all_facilities.push({title:inner_title, address:inner_address, button:inner_button});
	});

	// データの型: {position: latlng, title: text}
	function initialize(){
		// geocoder
		var geocoder = new google.maps.Geocoder(); // Geocoder object

		// draw map
		var myOptions = {zoom: config['zoom'], center:center_of_the_map, mapTypeId:google.maps.MapTypeId.ROADMAP};//表示オプション(中心位置/タイプ)
		var total_map = new google.maps.Map(mapDiv01, myOptions); // 指定したdivの場所に、オプション指定してマップをリクエスト


		function make_func_with_facility(facility){

			var func = function(results, status){
				if (status == google.maps.GeocoderStatus.OK){
					var latlng = results[0].geometry.location;
					var marker = new google.maps.Marker({position: latlng, map:total_map});
					var title = facility["title"];
				 	var	marker_pop = new google.maps.InfoWindow({content:title});
				 	// set event handler to button (google maps js)
					// $(facility["button"]).click(function(){ }); // …と同じこと
				 	google.maps.event.addDomListener(facility["button"], 'click', function(event){
				 		marker_pop.open(total_map, marker);
				 	});
					// set event handler to marker (google maps js)
				 	google.maps.event.addListener(marker, 'click', function(event){
				 		marker_pop.open(total_map, marker);
				 	});
				}else{
					alert("取得できませんでした");
				}
			};
			return func;
		}

		// 施設の数ループしてマーカー設定
		for (var i=0; i < all_facilities.length; i++) {
			var facility = all_facilities[i];
			var callback_with_facility = make_func_with_facility(facility);
			geocoder.geocode(
				{
					address: facility["address"] 
				},
				callback_with_facility
			);
		} // end of loop
	}

	google.maps.event.addDomListener(window,'load',initialize);
})();

メモ:中心とズームレベルを自動調整するのに fitBounds() を使う

http://lifelog.main.jp/wordpress/?p=266

• latlngBounds (領域)オブジェクトを確保 >> llB
• llBオブジェクトに、latlngオブジェクトをセットしてextend()する
  • llB.extend(pos)
  • これで、領域オブジェクトが更新される
• 最後に、全体マップを「この領域にフィットさせる」よう指示
  • globalMap.fitBounds(llB)