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 commented where the example code begins/ends and where I'm trying to call it.

function initialize() {

var mapOptions = {
  zoom: 12,
  center: new google.maps.LatLng(52.204872,0.120163),
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  styles: styles,
  scrollwheel: false
};

var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);

setMarkers(map, sites);
            infowindow = new google.maps.InfoWindow({
    content: "loading..."

});
}

var sites = [
    // List all locations for each pin
['The Frontroom', 52.202977,0.138938, 1, '<p>The Frontroom. <br/>23-25 Gwydir Street, Cambridge, CB1 2LG <br/>01223 305 600</p>'],
];

function setMarkers(map, markers) {

for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    var marker = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4],
        icon: "http://visualartscambridge.org/wp-content/uploads/2013/03/map-pin.png"
    });
    // 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;";

    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
    };
    // end example code for custom infobox

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

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

google.maps.event.addDomListener(window, 'load', initialize);

No errors on page load, when I click a pin I get the following error: 'Uncaught TypeError: Object # — egr103, Mar 01 '13 at 19:13
Yeah, http://visualartscambridge.org/home/ - Map is at the bottom — egr103, Mar 01 '13 at 19:18
Just a wild guess, but could you try declaring your `map` variable at the top rather than in your `initialize` function? — user2019515, Mar 01 '13 at 19:36
You may want to take a look at [link](http://stackoverflow.com/questions/15114963/changing-data-in-the-info-window-with-google-map-markers#comment21314361_15114963) — Ankit, Mar 01 '13 at 19:48
If you want to style your information window than better try infobox. Another thing in your code is infowindow.open() take marker as second argument you are passing myOptions which is not marker. Your myOptions is more like content than markeroption. — Ankit, Mar 01 '13 at 19:51
For style check this out [InfoBox](http://stackoverflow.com/questions/3610884/changing-background-color-in-google-map-infowindow) — Ankit, Mar 01 '13 at 19:53
@Ankit that info box link is what I'm trying to merge in with my existing code. Hence my question. I'm not that great with JS and need some help doing it. — egr103, Mar 01 '13 at 20:40

geocodezip · Accepted Answer · 2014-11-27T13:11:26.377

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

I posted a question here http://stackoverflow.com/questions/41386449/how-to-keep-atleast-one-map-infobox-opened — June, Dec 29 '16 at 20:02

nicholasnet · Answer 2 · 2013-03-07T16:41:39.923

1

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.

edited Mar 07 '13 at 16:41

answered Mar 01 '13 at 20:31

nicholasnet

2,117
2
24
46

You are right I made that change. Thank you very much for pointing that out. – nicholasnet Mar 04 '13 at 16:19

score 0 · Answer 3 · answered Mar 01 '13 at 21:00

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.

Google Maps custom infobox

3 Answers3

Linked