javascript - how do i implement google maps infobox -

i have google map set works fine default infowindow i'm looking little more stylized, able control how window looks. have looked @ infobox examples , docs unable see how can implement code.

javascript:

// enable visual refresh     google.maps.visualrefresh = true;      function initialize() {       var mylatlng = new google.maps.latlng(52.58448934362705, -2.2128868103027344);       var mapoptions = {         zoom: 19,         center: mylatlng,         maptypeid: google.maps.maptypeid.satellite       };        var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);        var marker = new google.maps.marker({               map: map,               draggable: false,               animation: google.maps.animation.drop,               position: new google.maps.latlng(52.58448934362705, -2.2128868103027344),               icon: {                 size: new google.maps.size(32, 32),                 scaledsize: new google.maps.size(32, 32),                 url: "marker.png"               }             });        });          setmarkers(map, obstacles);     }  var obstacles = [   ['the start', -2.2128868103027344 ,52.58448934362705, 1, '<b>the start</b>', 'bracken-maze-torture.jpg'],   ['chatway chase', -2.2232937812805176,52.585369365082556, 1, '<b>chatway chase</b>', 'bracken-maze-torture.jpg'],   ['elephant fence', -2.2287386655807495,52.585874554601546, 1, '<b>elephant fence</b>', 'bracken-maze-torture.jpg'],   ['elephant fence', -2.2254180908203125,52.586862101811484, 1, '<b>elephant fence</b>', 'bracken-maze-torture.jpg'],   ['elephant fence', -2.2167277336120605,52.58403954805975, 1, '<b>elephant fence</b>', 'bracken-maze-torture.jpg'],   ['elephant fence', -2.216741144657135,52.58465231189634, 1, '<b>elephant fence</b>', 'bracken-maze-torture.jpg'],   ['rabbit hill', -2.220606207847595,52.58593322139412, 1, '<b>rabbit hill</b>', 'bracken-maze-torture.jpg'],   ['brasher disley steplechase', -2.2237443923950195,52.58636018290797, 1, '<b>brasher disley steplechase</b>', 'bracken-maze-torture.jpg'],   ['bracken maze torture', -2.228196859359741,52.58881105708316, 1, '<b>bracken maze torture</b>', 'bracken-maze-torture.jpg'],   ['the slalom', -2.233647108078003,52.590078809218845, 1, '<b>the slalom</b>', 'bracken-maze-torture.jpg'],   ['jungle trench battlefileds', -2.2293394804000854,52.5877551121424, 1, '<b>jungle trench battlefileds</b>', 'bracken-maze-torture.jpg'],   ['gurkha grand national', -2.23097562789917,52.58586803606421, 1, '<b>gurkha grand national</b>', 'bracken-maze-torture.jpg'],   ['jungle water slalom', -2.2270596027374268,52.58515425035844, 1, '<b>jungle water slalom</b>', 'bracken-maze-torture.jpg'],   ['technospanner legover', -2.2247743606567383,52.58636670137212, 1, '<b>technospanner legover</b>', 'bracken-maze-torture.jpg']   ];  function setmarkers(map, locations) {      var image = {       size: new google.maps.size(32, 32),       scaledsize: new google.maps.size(32, 32),       url: "marker.png"     };      var makeinfowindow = function(marker, obs) {        // create info window. in content can pass simple text or html code.       var infowindow = new google.maps.infowindow({         content: "<div style='width:220px; position:relative;'>" + obs[4] + "<img src='" +  + "'/></div>",         maxwidth: 220,       });          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       };         // add listner marker. can add listner object. example in specifying infowindow open on marker mouseover       google.maps.event.addlistener(marker, "click", function() {         infowindow.open(map, marker);       });     };    (var = 0; < locations.length; i++) {     var obstacle = locations[i];     var mylatlng = new google.maps.latlng(obstacle[2], obstacle[1]);     var marker = new markerwithlabel({         position: mylatlng,         map: map,         icon: image,         title: obstacle[0],         zindex: obstacle[3],         labelcontent: + 1,         labelanchor: new google.maps.point(14, 29),         labelclass: "labels"     });     makeinfowindow(marker, obstacle);   } }  google.maps.event.adddomlistener(window, 'load', initialize); 

<!doctype html> <html>   <head>     <meta name="viewport" content="initial-scale=1.0, user-scalable=no">     <meta charset="utf-8">     <title>simple polylines</title>     <style>     #map-canvas, #map_canvas {       height: 800px;     }     .infobox-wrapper {     display:none;     }     .infobox, .infobox {         margin-top: 8px;         background:#fff;         color:#666;         font-family:arial, helvetica, sans-serif;         font-size:12px;         padding: .5em 1em;         -webkit-border-radius: 2px;         -moz-border-radius: 2px;         border-radius: 2px;         -webkit-box-shadow: 0 0  8px #000;         box-shadow: 0 0 8px #000;     }     .labels {        color: #fff;        font-family: "arial", sans-serif;        text-align: center;        width: 26px;        white-space: nowrap;        letter-spacing: 0;      }     </style>     <script src="http://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>     <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox.js"></script>     <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>      <script>     // enable visual refresh     google.maps.visualrefresh = true;     var obstacles = [   ['the start', -2.2128868103027344 ,52.58448934362705, 1, '<h2>the start</h2>', 1],   ['chatway chase', -2.2232937812805176,52.585369365082556, 1, '<h2>chatway chase</h2>', 2],   ['elephant fence', -2.2287386655807495,52.585874554601546, 1, '<h2>elephant fence</h2>', 3],   ['elephant fence', -2.2254180908203125,52.586862101811484, 1, '<h2>elephant fence</h2>', 4],   ['elephant fence', -2.2167277336120605,52.58403954805975, 1, '<h2>elephant fence</h2>', 5],   ['elephant fence', -2.216741144657135,52.58465231189634, 1, '<h2>elephant fence</h2>', 6],   ['rabbit hill', -2.220606207847595,52.58593322139412, 1, '<h2>rabbit hill</h2>', 7],   ['brasher disley steplechase', -2.2237443923950195,52.58636018290797, 1, '<h2>brasher disley steplechase</h2>', 8],   ['bracken maze torture', -2.228196859359741,52.58881105708316, 1, '<h2>bracken maze torture</h2>', 9],   ['the slalom', -2.233647108078003,52.590078809218845, 1, '<h2>the slalom</h2>', 10],   ['jungle trench battlefileds', -2.2293394804000854,52.5877551121424, 1, '<h2>jungle trench battlefileds</h2>', 11],   ['gurkha grand national', -2.23097562789917,52.58586803606421, 1, '<h2>gurkha grand national</h2>', 12],   ['jungle water slalom', -2.2270596027374268,52.58515425035844, 1, '<h2>jungle water slalom</h2>', 13],   ['technospanner legover', -2.2247743606567383,52.58636670137212, 1, '<h2>technospanner legover</h2>', 14]   ];      function initialize() {       var mylatlng = new google.maps.latlng(52.58448934362705, -2.2128868103027344);       var mapoptions = {         zoom: 19,         center: mylatlng,         maptypeid: google.maps.maptypeid.satellite       };        var map = new google.maps.map(document.getelementbyid('map-canvas'), mapoptions);      var infobox = new infobox({       map: map,          disableautopan: false,          maxwidth: 150,          pixeloffset: new google.maps.size(-140, -40),          zindex: null,          alignbottom: true,          boxstyle: {             width: "280px"         },         closeboxmargin: "-16px -20px 0px 0px",         closeboxurl: "interactive-map-info-close.png",         infoboxclearance: new google.maps.size(1, 1)      });        setmarkers(map, infobox);     }    function setmarkers(map, infobox) {    var image = {     size: new google.maps.size(38, 38),     scaledsize: new google.maps.size(38, 38),     url: "marker.png"   };      (var = 0; < obstacles.length; i++) {     var obstacle = obstacles[i];     var data = obstacle[0];     var index = obstacle[5];     var mylatlng = new google.maps.latlng(obstacle[2], obstacle[1]);     var marker = new markerwithlabel({         position: mylatlng,         map: map,         icon: image,         title: obstacle[0],         zindex: obstacle[3],         labelcontent: + 1,         labelanchor: new google.maps.point(13, 33),         labelclass: "labels"     });   google.maps.event.addlistener(marker, 'click', (function(marker, data) {         return function() {           infobox.setcontent(data);           infobox.open(map, marker)                 }       })(marker, data));   } }   google.maps.event.adddomlistener(window, 'load', initialize);     </script>   </head>   <body>     <div id="map-canvas"></div>     </body> </html>