谷歌地图和infowindow.js插件

Question

我有这个剧本为我的Gmap和标记。它工作正常，但我尝试添加自定义infowindow并使用infobox.js插件。所以我现在得到自定义infowindows，但我有两个问题：

我必须点击两次标记打开。

我不能让其他infowindows关闭，只能打开一个。

这里是活生生的例子http://www.ninprivateaccommodation.com/hr/okruzenje

function createGoogleMap() { 
     // Create the map 
     // No need to specify zoom and center as we fit the map further down. 
     var Boja = [ 
      { 
      featureType: "all", 
      stylers: [ { "hue": "#0066ff" } ] 
      } 
     ]; 
     var mapOptions = { 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      center: new google.maps.LatLng(44.116542, 15.267878), 
      zoom: 14, 
      scrollwheel: false, 
      styles: Boja, 
      streetViewControl: false 
     }; 
     var map = new google.maps.Map(document.getElementById("KartaOkruzenje"), 
      mapOptions); 

     // Define the list of markers. 
     // This could be generated server-side with a script creating the array. 
     var markers = [ 
      { lat: 44.116542, lng: 15.265878, name: "<div class='OkruzenjeOpis'>Objekt Martina<br> Ulica Filipa Vukasovića 22<br> 53270, Senj<br> Hrvatska</div>", icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' }, 
      { lat: 45.001831, lng: 14.89686, name: "<div class='OkruzenjeOpis'>Objekt Martina<br> Ulica Filipa Vukasovića 22<br> 53270, Senj<br> Hrvatska</div>", icon:'http://maps.google.com/mapfiles/ms/icons/blue-dot.png' } 
     ]; 

     // Ikone 
     // http://maps.google.com/mapfiles/ms/icons/red-dot.png 
     // http://maps.google.com/mapfiles/ms/icons/green-dot.png 
     // http://maps.google.com/mapfiles/ms/icons/blue-dot.png 


     // Create the markers ad infowindows. 
     for (index in markers) addMarker(markers[index]); 
     function addMarker(data) { 
      // Create the marker 
      var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(data.lat, data.lng), 
      map: map, 
      title: data.name, 
      icon: data.icon 

      }); 

      // Create the infowindow with two DIV placeholders 
      // One for a text string, the other for the StreetView panorama. 
      var content = document.createElement("DIV"); 
      var title = document.createElement("DIV"); 
      title.innerHTML = data.name; 
      content.appendChild(title); 
      //var streetview = document.createElement("DIV"); 
      //streetview.style.width = "200px"; 
      //streetview.style.height = "200px"; 
      //content.appendChild(streetview); 
      var InfoBoxVar = new InfoBox({ 
      content: content, 
      disableAutoPan: false, 
      maxWidth: 150, 
      pixelOffset: new google.maps.Size(-140, 0), 
      zIndex: null, 
      boxStyle: { 
       background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
       opacity: 0.75, 
       width: "280px" 
      }, 
      closeBoxMargin: "12px 4px 2px 2px", 
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
      infoBoxClearance: new google.maps.Size(1, 1) 
      }); 

      // Open the infowindow on marker click 
      google.maps.event.addListener(marker, "click", function() { 
      InfoBoxVar.open(map, marker); 
      }); 

      // Handle the DOM ready event to create the StreetView panorama 
      // as it can only be created once the DIV inside the infowindow is loaded in the DOM. 
      google.maps.event.addListenerOnce(InfoBoxVar, "domready", function() { 
      var panorama = new google.maps.StreetViewPanorama(streetview, { 
       navigationControl: false, 
       enableCloseButton: false, 
       addressControl: false, 
       linksControl: false, 
       visible: true, 
       position: marker.getPosition() 
      }); 
      }); 
     } 

     // Zoom and center the map to fit the markers 
     // This logic could be conbined with the marker creation. 
     // Just keeping it separate for code clarity. 
     var bounds = new google.maps.LatLngBounds(); 
     for (index in markers) { 
      var data = markers[index]; 
      bounds.extend(new google.maps.LatLng(data.lat, data.lng)); 
     } 
     map.fitBounds(bounds); 
     } 

Answer 1

你有错误报告：Uncaught ReferenceError: streetview is not defined，文件gmaps.okruzenje-hr.js，行80

为了摆脱这种错误例如，您可以注释掉事件监听器

google.maps.event.addListenerOnce(InfoBoxVar, "domready", function() { 

要打开另一个infowindow，必须收集关于打开的infowindows的信息，chan ge addMarker()和事件监听器。添加后var markers = [...]

var infoWindows = []; 
... 
// Create the markers ad infowindows. 
for (index in markers) addMarker(markers[index], index); 

function addMarker(data, idx) { 
... 

infoWindows.push(InfoBoxVar); 

    // Open the infowindow on marker click 
    google.maps.event.addListener(marker, "click", function() { 
    for (var i = 0; i < infoWindows.length; i++) { 
     if (i != idx) { 
      infoWindows[i].close(); 
     } 
    } 
    InfoBoxVar.open(map, marker); 
    });