Google Maps V3 with custom markers, using custom infoboxes, making one only appear at a time?

Question

UPDATE

I have added the error up here as its makes it easier to read. Below is the error I now get with that update. P.S it should be InfoBox and not Infobox, I think I made that error somewhere when I typed it up :). So where am I going wrong now? I am not even sure what this error message is saying :

          Uncaught TypeError: Cannot read property 'style' of null
            InfoBox.setBoxStyle_
            InfoBox.setOptions
            (anonymous function) PAGE.php:101
            N.trigger main.js:23
            xK.(anonymous function).e
            (anonymous function)
            N.trigger main.js:23
            F.ie
            F.sm
            (anonymous function) main.js:11
            N.trigger main.js:23
            F.Jk
            (anonymous function)

OLD POST

I have a custom Google Maps V3 with custom markers being generated with a XML file that is built with a custom DB. I have posted my code below, this all works, only thing is I have now built in the Infobox plugin, which gives me more control over the styling of the marker styles. However they, unlike the Google InfoWindow does not close automatically when another marker is clicked.

This is my load function, which sets the map and build the marker with my XML file,

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(54.500, 355.000),
    zoom: 5,
    mapTypeId: 'roadmap'
  });

  downloadUrl("genxml.php?id=<?php echo $VarToUse ?>",function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var number = markers[i].getAttribute("number");
      var address = markers[i].getAttribute("address");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),parseFloat(markers[i].getAttribute("lng")));
      var myOptions = {
        content: "<b class=\"infoBox_links\"><a href=\"search.php?BoxID=" + number + "\">" + name + "</a></b> <br/>" + address
        ,disableAutoPan: false
        ,maxWidth: 0
        ,pixelOffset: new google.maps.Size(-90, -125)
        ,zIndex: null
        ,boxStyle: { 
           background: "#FFFFFF",
           border: "1px solid grey",
           width: "170px",
           height: "70px",
           padding: "8px",
           fontSize: "12px",
           overflow: "hidden"
         }
        ,closeBoxMargin: "-5px"
        ,closeBoxURL: "imgs/x_google.png"
        ,isHidden: false
        ,pane: "floatPane"
        ,enableEventPropagation: false
      };
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, myOptions); //function call to set the markers!
    }
  });
} //End of function load()

As you can see I have a function that is called within the load, this is my current code, which works fine

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
    var ib = new InfoBox(myOptions);
    ib.open(map, marker);
  });
} //End of bindInfoWindow function!!

This works, custom info boxes with the styles I need are generated, however the current 'open' info box does not close when a new marker is click. And from a number of different attempts and ideas from other people, I am currently working with :

function bindInfoWindow(marker, map, myOptions) {

  var ibs = [];

  var closeInfoBox = function() {
    for (var i in ibs) {
        ibs[i].close();
    }
  }

  var ibIndex = ibs.push(new Infobox()) - 1,
    ib = ibs[ibIndex];

  google.maps.event.addListener(marker, 'click', function() {
        closeInfoBox();
        ib.setOptions(myOptions);
        //var ib = new InfoBox(myOptions);
        ib.open(map, marker);
  });
}

This code come from Opening only a infobox at a time when multiple markers are displayed on the map

However this only gives me errors, either I have not copied this code right or my set up for the maps different enough for this code not to work (with I don't think is the case). I think it is something I am not doing right. Right now as the code stands, its this line that does not want to work,

        var ibIndex = ibs.push(new Infobox()) - 1,

Comes back in the console log with

        Uncaught ReferenceError: Infobox is not defined PAGE.php:101
        bindInfoWindow PAGE.php:101
        (anonymous function) PAGE.php:84
        request.onreadystatechange

All ideas most welcome,

Many thanks

Glenn.

Andy · Accepted Answer · 2013-10-04T13:27:20.280

3

Try this. You need the array and closeInfoBox specified outside of the load function, otherwise you just keep resetting the array every time.

var ibs = [];

function closeInfoBox() {
  for (var i in ibs) {
    ibs[i].close();
  }
}

And then you need to push the infobox into the array within the bind function:

function bindInfoWindow(marker, map, myOptions) {
  var ib = new Infobox(myOptions);
  ibs.push(ib);

  google.maps.event.addListener(marker, 'click', function() {
    closeInfoBox();
    ib.open(map, marker);
  });

}

I haven't tested this, but it's similar to what I've done in my code at various points.

edited Oct 04 '13 at 13:27

answered Oct 04 '13 at 11:44

Andy

61,948
13
68
95

I have update the post above. Now the blindInfoWindow is outside of the load function, I change the code to what you have giving me. However there is a new error. Plus where should closeInfoBox be? above the load function or below it, or does it not matter? – Glenn Curtis Oct 04 '13 at 12:04
No. The array and the `closebox` function need to be outside of `load`. `bind` was fine where it was. – Andy Oct 04 '13 at 12:16
OK, well they are now outside the load function and I am getting that error that I posted at the top.... and I can not get this to work.... its started to drive me crazy, I know this should work and it must be something I have done to the code to stop it from working. Just as a side note, should this not be default, it is from Goolge InfoWindow? – Glenn Curtis Oct 04 '13 at 12:48
1

Remove `ib.setOptions(myOptions);` and see what happens. I forgot to remove it from my example. – Andy Oct 04 '13 at 13:27

score 0 · Answer 2 · answered Oct 04 '13 at 18:58

However they, unlike the Google InfoWindow does not close automatically when another marker is clicked

This is new to me, a google.maps.InfoWindow will never be closed automatically .

When you only want to have a single InfoBox open use only a single InfoBox-instance for all markers:

function bindInfoWindow(marker, map, myOptions) {
  google.maps.event.addListener(marker, 'click', function() {
     //create a Infobox that will be used by each marker
    if(!this.getMap().get('ib')){this.getMap().set('ib',new InfoBox());}
    var ib = this.getMap().get('ib');
    ib.setOptions(myOptions);
    ib.open(this.getMap(),this);
  });
}

Google Maps V3 with custom markers, using custom infoboxes, making one only appear at a time?

UPDATE

OLD POST

2 Answers2