Comment puis-je implémenter google maps infobox

Question

J'ai une carte Google configurée qui fonctionne bien avec l'InfoWindow par défaut mais je cherche quelque chose d'un peu plus stylisé, j'aimerais pouvoir contrôler l'apparence de cette fenêtre. J'ai regardé les exemples et docs d'InfoBox mais je suis incapable de voir comment je peux implémenter ceci dans mon code.

Javascript:

// Enable the 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 you 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 for marker. You can add listner for any object. It is just an example in which I am specifying that infowindow will be open on marker mouseover 
     google.maps.event.addListener(marker, "click", function() { 
     infowindow.open(map, marker); 
     }); 
    }; 

    for (var i = 0; i < 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: i + 1, 
     labelAnchor: new google.maps.Point(14, 29), 
     labelClass: "labels" 
    }); 
    makeInfoWindow(marker, obstacle); 
    } 
} 

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

Answer 1

<!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 the 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" 
    }; 



    for (var i = 0; i < 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: i + 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>