Google Map and infowindow.js plugin

Question

我有此脚本用于我的GMAP和标记。它可以正常工作，但我尝试添加自定义InfowDindow并使用Infobox.js插件。因此，我现在得到自定义的Infowdows，但我有两个问题：

我必须单击两次才能打开标记。

我无法让其他Infowdindows关闭并仅打开一个。

这是现场示例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，file gmaps.okruzenje-hr.js，行80

要摆脱此错误，您可以例如注释out event event侦听器

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

要关闭另一个InfowDindow，您必须收集有关打开的Infowdindows，更改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);
  });