Google Maps V3 fitBounds en marcadores visibles
Me resulta difícil obtener información clara sobre esto, pero lo que estoy tratando de lograr es fitBounds en marcadores visibles.
La matriz define el título, categoría, lat / long y href. Agrega todos los marcadores al mapa, pero solo muestra la primera categoría. Cuando hagas clic en otras categorías, también las mostrarás.
Puedo hacer que fitBounds funcione en otros ejemplos más pequeños en los que solo necesita encajar Bounds en carga inicial, pero ahora quiero encajarBounds cada vez que muestro / oculto marcadores.
Cualquier consejo apreciado.
function initialize() {
var markers = new Array();
var locations = [
['Ness Country Park', '', 'walking', 54.933402, -7.197418, "/local-activities/specific/ness-country-park"],
['Learmount Forest', '', 'walking', 54.862672, -7.085495, "/local-activities/specific/learmount-forest"],
['Muff Glen', 'Muff Glen Forest is nestled in a valley, just outside Eglinton. ', 'walking', 55.029472, -7.170124, "/local-activities/specific/muff-glen"],
['Banagher Forest', '', 'walking', 54.893855, -7.020693, "/local-activities/specific/banagher-forest"],
['Binevenagh Forest', '', 'walking', 55.083549, -6.901131, "/local-activities/specific/binevenagh-forest"],
['17th Century Walls', '', 'explore', 54.997666, -7.319770, "/local-activities/specific/17th-century-walls"],
['Apprentice Boys Memorial Hall', '', 'explore', 54.995339, -7.323890, "/local-activities/specific/apprentice-boys-memorial-hall"],
['The Bogside Artists', '', 'explore', 54.998466, -7.325177, "/local-activities/specific/the-bogside-artists"],
['Foyle Valley Railway Museum', '', 'explore', 54.991154, -7.321572, "/local-activities/specific/foyle-valley-railway-museum"],
['Gasyard Heritage Centre', '', 'explore', 54.989923, -7.333674, "/local-activities/specific/gasyard-heritage-centre"],
['The Guildhall', '', 'explore', 54.996053, -7.320800, "/local-activities/specific/the-guildhall"],
['Harbour Museum', '', 'explore', 54.998269, -7.319427, "/local-activities/specific/harbour-museum"],
['Museum of Free Derry', '', 'explore', 54.997099, -7.326121, "/local-activities/specific/museum-of-free-derry"],
['Riverwatch Aquarium and Visitor Centre', '', 'explore', 54.988950, -7.317538, "/local-activities/specific/riverwatch-aquarium-and-visitor-centre"],
['St Augustines Church', '', 'explore', 54.994736, -7.324040, "/local-activities/specific/st-augustines-church"],
['St Columbs Cathedral', '', 'explore', 54.994564, -7.322345, "/local-activities/specific/st-columbs-cathedral"],
['St Columbas Church Tower', '', 'explore', 55.010132, -7.330992, "/local-activities/specific/st-columbas-church-tower"],
['Tower Museum', '', 'explore', 54.997112, -7.320328, "/local-activities/specific/tower-museum"],
['Workhouse Museum', '', 'explore', 54.994995, -7.305071, "/local-activities/specific/workhouse-museum"],
['Hezlett House', '', 'explore', 55.161697, -6.787148, "/local-activities/specific/hezlett-house"],
['Mussenden Temple & Downhill Demense', '', 'explore', 55.166404, -6.819849, "/local-activities/specific/mussenden-temple-and-downhill-demense"],
['Springhill House', '', 'explore', 54.685615, -6.656857, "/local-activities/specific/springhill-house"],
['Fort Dunree', '', 'explore', 55.196691, -7.547607, "/local-activities/specific/fort-dunree"],
['Barron Top Fun Farm', '', 'explore', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm"],
['Ulster American Folk Park', '', 'explore', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park"],
['Wellbrook Beetling Mill', '', 'explore', 54.651366, -6.836071, "/local-activities/specific/wellbrook-beetling-mill"],
['Claudy Country Park', '', 'cycling', 54.911868, -7.151756, "/local-activities/specific/claudy-country-park"],
['Faughan Valley Cycle Route', '', 'cycling', 54.981797, -7.337022, "/local-activities/specific/faughan-valley-cycle-route"],
['Foyle Valley Cycle Route ', '', 'cycling', 55.001530, -7.321208, "/local-activities/specific/foyle-valley-cycle-route-"],
['Royal Portrush Golf Club', '', 'golfing', 55.199823, -6.634820, "/local-activities/specific/royal-portrush-golf-club"],
['Porstewart Golf Club', '', 'golfing', 55.172149, -6.724534, "/local-activities/specific/porstewart-golf-club"],
['Castlerock Golf Club ', '', 'golfing', 55.165945, -6.785645, "/local-activities/specific/castlerock-golf-club-"],
['Cregan Country Park', '', 'family', 54.999841, -7.343888, "/local-activities/specific/cregan-country-park"],
['Riverwatch Aquarium', '', 'family', 54.988852, -7.317495, "/local-activities/specific/riverwatch-aquarium"],
['Far & Wild Adventure Activities', '', 'family', 55.048369, -7.276855, "/local-activities/specific/far-and-wild-adventure-activities"],
['Brunswick Cinebowl', '', 'family', 55.013008, -7.324448, "/local-activities/specific/brunswick-cinebowl"],
['Campsie Karting', '', 'family', 55.036076, -7.196903, "/local-activities/specific/campsie-karting"],
['Barron Top Fun Farm', '', 'family', 54.856497, -7.335434, "/local-activities/specific/barron-top-fun-farm-1"],
['Ulster American Folk Park', '', 'family', 54.587973, -7.377191, "/local-activities/specific/ulster-american-folk-park-1"],
['Giants Causeway', '', 'family', 55.233317, -6.518154, "/local-activities/specific/giants-causeway"],
['Carick-a-Rede Rope Bridge', '', 'family', 55.237282, -6.351643, "/local-activities/specific/carick-a-rede-rope-bridge"],
['Mussenden Temple', '', 'family', 55.165410, -6.818218, "/local-activities/specific/mussenden-temple"]
];
//Set up Google Map
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 15,
center: new google.maps.LatLng(55.013431, -7.314148),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//InfoBox will be used so InfoWindow is not needed
//var infowindow = new google.maps.InfoWindow();
//Set shadow options
var shadow = new google.maps.MarkerImage('images/marker-shadow.png',
new google.maps.Size(77.0, 62.0),
new google.maps.Point(0, 0),
new google.maps.Point(22.0, 62.0)
);
var marker, i;
for ( var i = 0; i < locations.length; i++ ) {
console.log(locations[i][3], locations[i][4]);
}
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
shadow: shadow,
icon: 'images/map_'+locations[i][2]+'_image.png'
});
markers.push(marker);
//Create div for InfoBox content
var boxText = document.createElement("div");
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function () {
//Style InfoBox content
boxText.style.cssText = "border: none 0; margin-top: 8px; background:#fff; padding: 8px;border:1px solid #877856;";
boxText.innerHTML = locations[i][0]+"<br />"+locations[i][2]+"<br />"+locations[i][1]+"<img src='images/tipbox.png' class='infobox-arrow' />";
//Remove close box bug fix
$(".infobox-close").remove();
//Set InfoBox options
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-140, -180)
,zIndex: null
,boxStyle: {
opacity: 1
,width: "280px"
}
,closeBoxMargin: "12px 7px 0 0"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
//Move map to center on marker
map.setCenter(marker.getPosition());
//Attach info box to relevant marker
var ib = new InfoBox(myOptions);
ib.open(map, marker);
//Close InfoBox when map tiles are clicked
$("canvas").click(function () {
ib.close(map, marker);
});
}
})(marker, i));
};
//shows all markers of a particular category, and ensures the checkbox is checked
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
}
//hides all markers of a particular category, and ensures the checkbox is cleared
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
}
//show or hide the categories initially
show("walking");
hide("golfing");
hide("family");
hide("explore");
hide("cycling");
//Show/Hide category markers
$("#activities .checkbox").click(function(){
var cat = $(this).attr("value");
// If checked
if ($(this).is(":checked"))
{
show(cat);
}
else
{
hide(cat);
}
});
};
//Execute function onload
window.load = initialize();