Question

I have a map that has checkboxes for users to select what they would like displayed on the map. Everything works well with the exception of the following two items.

1. When a user selects an item from the list the marker does display on the map, however the map does not re-center on the marker. This is needed for a marker that is outside the viewable area of the map when the page loads.

2. When I have multiple markers open on the map I would like to have only 1 infowindow open at a time, currently if I click on 10 markers there will be 10 infowindows open. I would like to have it where if an infowindow is open and another marker is clicked then the first infowindow closes.

I have pasted a snippet of the code for one of the markers below, any help would be greatly appreciated!

    jQuery(document).ready(function(){
        /**
        * The Map object.
        * @type {google.maps.Map}
        */
        var mapOptions = {
            center: new google.maps.LatLng(36.812946,-119.746953),
            zoom: 16,
            mapTypeId: google.maps.MapTypeId.SATELLITE
        };
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);



        /**
        * The markers array.
        * @type {Object}
        */
        var markers = {};


            markers.building37 = [];

            var marker0237  = new google.maps.Marker({
                visible: false,
                icon: new google.maps.MarkerImage("images/website/brown_Marker.png",new google.maps.Size(32,37),null,null),
                title: 'Building',
                position: new google.maps.LatLng(36.80694607313768,-119.73590791225433),
                center: position,
                map: map
            });

            markers.building37.push(marker0237);  

            var info_window0237 = new google.maps.InfoWindow({
                content: '<div id="infobubble"><div id="img"><img src="images/buildings/Foundation001.jpg" alt="Foundation Building"></div><div id="desc"><h3>Foundation</h3></div></div>',
                maxWidth:350,
            });

            google.maps.event.addListener(marker0237, "click", function() {
                info_window0237.open(map,marker0237);
            });



    var showBuilding37 = false;

    var mgrBuilding37 = null;


        /**
        * Toggles Building 37 Marker Group visibility.
        */
        function toggleBuilding37()
        {
            showBuilding37 = !showBuilding37;
            if (showBuilding37)
                for (var i=0; i < markers.building37.length; i++)
                    markers.building37[i].setVisible(true);
            if (mgrBuilding37)
            {
                if (showBuilding37)
                {
                    mgrBuilding37.addMarkers(markers.building37, 0);
                    mgrBuilding37.refresh();
                } 
                else
                {
                    mgrBuilding37.clearMarkers();
                    mgrBuilding37.refresh();
                }
            }
            else 
            {
                mgrBuilding37 = new MarkerManager(map, {trackMarkers: true, maxZoom: 15});
                google.maps.event.addListener(mgrBuilding37, "loaded", function() {
                    if (showBuilding37)
                    {
                        mgrBuilding37.addMarkers(markers.building37, 0);
                        mgrBuilding37.refresh();
                    } 
                    else
                    {
                        mgrBuilding37.clearMarkers();
                        mgrBuilding37.refresh();
                    }
                });
            }
        }            

          google.maps.event.addDomListener(
              document.getElementById("building37-cb"),"click", toggleBuilding37);  

    });

Answer 1

I don’t see where you are setting the map center.

1. You should do something like map.setCenter(location); when you add a marker.

2. You should keep a list of info windows and when you display one, loop through the others and hide their info windows.

       //Declare your info window array
       var infoWindows = new Array();
   
       var info_window0237 = new google.maps.InfoWindow({
           content: '<div id="infobubble"><div id="img"><img src="images/buildings/Foundation001.jpg" alt="Foundation Building"></div><div id="desc"><h3>Foundation</h3></div></div>',
           maxWidth:350,
       });
   
       //After you make an infowindow, add it to the array
       infoWindows.push(info_window0237);
   
       google.maps.event.addListener(marker0237, "click", function() {                          
             //When you show an infowindow on click, hide the rest
             for(i = 0; i < indowWindows.length; i++)
             {
                  //this will close all the infowindows you added to the array
                  infoWindows[i].close();
             }
             info_window0237.open(map,marker0237);
   
       });