title: Google Maps custom infobox
body: <p>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?</p>
  
  <p>I've commented where the example code begins/ends and where I'm trying to call it.</p>
  
  <pre><code>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, '&lt;p&gt;The Frontroom. &lt;br/&gt;23-25 Gwydir Street, Cambridge, CB1 2LG &lt;br/&gt;01223 305 600&lt;/p&gt;'],
  ];
  
  function setMarkers(map, markers) {
  
  for (var i = 0; i &lt; 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);
  </code></pre>