Menu
Finding it hard to get clear information on this but what I am trying to achieve is fitBounds on visible markers.
The Array defines the title, category, lat/long and href. It adds all markers to the map but only shows the first category. When you click on other cetegories it will show those as well.
I can get fitBounds to work on other smaller examples where it just needs to fitBounds on inital load but now I want to fitBounds everytime I show/hide markers.
Any advice appreciated.
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();
424
well, you could program that inside your show function, I created own fiddle for you which demonstrates how to set 2 markers visible from array of 3 markers and fitBounds for only those:
fiddle example
Since code is now visible, with your case you could make separate fitBoundsToVisibleMarkers() method to be runned always after show() and hide() methods. for example:
function fitBoundsToVisibleMarkers() {
var bounds = new google.maps.LatLngBounds();
for (var i=0; i<markers.length; i++) {
if(markers[i].getVisible()) {
bounds.extend( markers[i].getPosition() );
}
}
map.fitBounds(bounds);
}
and your code does this:
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
// updating bounds in view
fitBoundsToVisibleMarkers();
}
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
// updating bounds in view
fitBoundsToVisibleMarkers();
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
