Google Maps custom infobox

Question

I\'m trying to incorporate a custom infobox as per this example but my code just doesn\'t work. Could someone take a look and see where I\'m going wrong?

I\'ve comme

Answer 1

Remove this portion of your existing code as well:

google.maps.event.addListener(marker, "click", function () {

    infowindow.setContent(this.html);
    // Call myOptions when marker is clicked and opened
    infowindow.open(map, myOptions, this);
});

Replace it with this from the InfoBox example:

var ib = new InfoBox(myOptions);

google.maps.event.addListener(marker, "click", function (e) {
  ib.open(map, this);  // change the map variable appropriately
});

working example

for multiple points, use function closure (a createMarker function) to maintain the association between the marker and the infoBox:

function createMarker(site, map){
    var siteLatLng = new google.maps.LatLng(site[1], site[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: site[0],
        zIndex: site[3],
        html: site[4] /* ,
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png" this icon no longer available */
    });
    // Begin example code to get custom infobox
    var boxText = document.createElement("div");
    boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: yellow; padding: 5px;";
    boxText.innerHTML = marker.html;

    var myOptions = {
             content: boxText
            ,disableAutoPan: false
            ,maxWidth: 0
            ,pixelOffset: new google.maps.Size(-140, 0)
            ,zIndex: null
            ,boxStyle: { 
              background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.12/examples/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
    };
    // end example code for custom infobox

    google.maps.event.addListener(marker, "click", function (e) {
     ib.close();
     ib.setOptions(myOptions);
     ib.open(map, this);
    });
    return marker;
}

function setMarkers(map, markers) {

 for (var i = 0; i < markers.length; i++) {
   createMarker(markers[i], map);
 }
}

working example with all the points from the live example

Answer 2

Alright than get inbox.js file from http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/ include in your html/jsp. You need to remove infowindow object from your code too

and modify your code with

function setMarkers(map, markers) {
  ......// same as your code
  var ib = new InfoBox(myOptions);
  google.maps.event.addListener(marker, "click", function (e) {
        ib.open(map, this);
    });
  .....//same as your code
}

If you won't succeed first time than we may need to try few times. Please post your modified code with result every time.

Answer 3

Please make sure that this have property html or not. Since it refers to marker at that time.

google.maps.event.addListener(marker, "click", function () 
{

    infowindow.setContent(this.html);
    // Call myOptions when marker is clicked and opened
    infowindow.open(map, myOptions, this);
});

Also try to limit your globals. Please try this Fiddle once.