ansaurus

Question

Google Map Api v3, how to get list of custom InfoBoxes (custom Overlays)?

Answer 1

+1 A:

You need to keep track of which overlays you created in an array and if you need to close some of them you can find them in the array and setMap(null) on them or another method that gets rid of them (close() in the example below). It is useful to create a custom id for your markers or overlays in your array so you can quickly locate them.

Here is an example of closing a custom InfoBox from the Google Maps Utils Library

<html> 
<head> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; 
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1/src/infobox.js"&gt;&lt;/script&gt; 
<script type="text/javascript"> 

    //this is the array to store our custom objects in 
     ibArray = [];

    //standard stuff
    function initialize() {

        var secheltLoc = new google.maps.LatLng(49.47216, -123.76307);

        var myMapOptions = {
             zoom: 15
            ,center: secheltLoc
            ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var theMap = new google.maps.Map(document.getElementById("map_canvas"), myMapOptions);


        var marker = new google.maps.Marker({
          map: theMap
         ,position: new google.maps.LatLng(49.47216, -123.76307)
         ,visible: true
        });

        var boxText = document.createElement("div");
        boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
        boxText.innerHTML = "City Hall, Sechelt<br>British Columbia<br>Canada";

        var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)         
            ,zIndex: null
            ,boxStyle: { 
              background: "url('tipbox.gif') no-repeat"
              ,opacity: 0.75
              ,width: "280px"

             }
            ,closeBoxMargin: "10px 2px 2px 2px"
            ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
            ,infoBoxClearance: new google.maps.Size(1, 1)
            ,isHidden: false
            ,pane: "floatPane"
            ,enableEventPropagation: false

        };

        var ib = new InfoBox(myOptions);

        //store your info box in the array with a custom id - there are number of ways you can index this - it really depends on what you are doing
        //you will need to all your objects that you want to close later. 
        ibArray.push({myId:"1234",box: ib});        

        //open the box
        ib.open(theMap, marker);
    }

    //close the box with an id passed to this function
    function closeBox(id){

        for (i=0;i<ibArray.length;i++) {
            if (ibArray[i].myId==id){
                myBox = ibArray[i].box;
                myBox.close();
            }
        }
    }
</script> 

</head> 
<body onload="initialize()"> 
    <div id="map_canvas" style="width:100%; height:50%"></div> 
    <p> 
    <input type="button" value="close box with custom id" onclick="javascript:closeBox('1234')">
</body> 

</html>

Michal 2010-10-18 00:03:56

ansaurus

tags:

views:

answers:

Google Map Api v3, how to get list of custom InfoBoxes (custom Overlays)?

related questions