Last active
November 16, 2015 06:49
-
-
Save inakagawa/a2c003e5191b089dc187 to your computer and use it in GitHub Desktop.
google maps 住所リストからマーカーを複数表示、イベントでポップアップ表示
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
仕様
HTML/CSS前提
jsの流れ
改善したい