Google Map and infowindow.js plugin

Question

I have this script for my Gmap and marker. It's work fine but I try to add custom infowindow and use infobox.js plugin. So I get custom infowindows now but I have two problems:

I have to click two times for marker to open.

I can't get other infowindows to close and get just one opened.

Here is live example 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

You have error reported: Uncaught ReferenceError: streetview is not defined, file gmaps.okruzenje-hr.js, line 80

To get rid of this error you can for example comment out event listener

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

To close another infowindow when one is opened you have to collect information about opened infowindows, change addMarker() and event listener. Add after 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);
  });