Google Maps V3 is suitable for visible markers

Question

Finding this is hard to get clear information about it, but what I'm trying to achieve is fitBounds on visible markers.

The array defines the title, category, lat / long and href. It adds all the markers to the map, but shows only the first category. When you click on other cetegories, it will also show them.

I can get fitBounds to work on other smaller examples where it just needs to adapt to the base load, but now I want every time I show / hide markers, I would like to snap frames.

Any advice is 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(); 

Answer 1

well, you can program this inside your show function, I created for you my own fiddle that demonstrates how to set 2 markers visible from an array of 3 markers and fitBounds only for those that:

script example

Since the code is now visible, in your case you can make a separate fitBoundsToVisibleMarkers() method, which will always run after the show() and hide() methods. eg:

 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(); } 

Answer 2

First think that you could use the bounds object and keep track of what is visible. But since you also hide the markers, and you cannot remove the coordinate from the borders, this will not work.

I think that the best option would be to show / hide the necessary markers, then skip all of them and add to the new border object, if it is visible. Then come up to it.

 function fitVisibleMarkers() { var bounds = new google.maps.LatLngBounds(); for(var m in markers) { if (markers[m].getVisible()) { bounds.extend(markers[m].getPosition()); } } map.fitBounds(bounds); } $("#activities .checkbox").click(function(){ var cat = $(this).attr("value"); if ($(this).is(":checked")) { show(cat); } else { hide(cat); } fitVisibleMarkers(); }); 

Answer 3

enter code here if (markers [marker_id] .getMap ()! = null) {document.getElementById ('markerlar'). innerHTML + = '
'+ marker_id +' '+ markers [marker_id] .position +' '; // markers [marker_id] .setMap (null); }