我如何實現谷歌地圖信息框

Question

我有一個谷歌地圖設置，與默認的InfoWindow工作正常，但是我正在尋找一些更風格化的東西，我想能夠控制這個窗口的外觀。我查看了InfoBox的例子和文檔，但是我無法看到如何將其實現到我的代碼中。

的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>