title: How to open marker info window outside of Google Map
body: <p>Can anybody help. I have below code and it's working fine but I would like to open info window outside of Google Map.</p>
  
  <p>Example: <code>&lt;a href='javascript:void(0)' onclick='infoopen("1")'&gt;Marker 1&lt;/a&gt;</code></p>
  
  <p>JavaScript code:</p>
  
  <pre><code>var infowindow;
  var map;
  var mapDrawn = false;
  var hotels = [];
  var markers = [];
  
  Site.gmapInit = function(centerX, centerY, zoom, clustering, panoramaID) {
      if (mapDrawn) return false;
  
      var centerX     = (centerX == null) ? 27.9944 : centerX;
      var centerY     = (centerY == null) ? -9.8437 : centerY;
      var zoom        = (zoom == null) ? 2 : zoom;
      var clustering  = (clustering == null) ? false : clustering;
      var panoramaID  = (panoramaID == null) ? "" : panoramaID
  
      var streetView  = (panoramaID != "");
  
      (function () {
  
          google.maps.Map.prototype.markers = new Array();
  
          google.maps.Map.prototype.addMarker = function(marker) {
              this.markers[this.markers.length] = marker;
          };
  
      })();   
  
  
      var iconShape = { 
          coord: [14,0,16,1,17,2,18,3,19,4,19,5,20,6,20,7,20,8,20,9,20,10,20,11,20,12,20,13,20,14,19,15,19,16,18,17,18,18,18,19,17,20,17,21,16,22,16,23,15,24,15,25,14,26,14,27,13,28,13,29,12,30,12,31,11,32,11,33,11,34,9,34,9,33,9,32,8,31,8,30,7,29,7,28,6,27,6,26,5,25,5,24,4,23,4,22,3,21,3,20,3,19,2,18,2,17,1,16,1,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,1,5,1,4,2,3,3,2,4,1,6,0], 
          type: 'poly' 
      };
  
  
      var latlng = new google.maps.LatLng(centerX, centerY);
      var mapOptions = {
          zoom: zoom,
          center: latlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: streetView,
          scrollwheel: false
  
      };
      map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
      // Initialize Fluster and give it an existing map
      if (clustering)
          var fluster = new Fluster2(map); 
  
      // Initialize markers for hotels
      for (var i = 0; i &lt; hotels.length; i++) {
          var hotel = hotels[i];
          if (hotel[2] != '') {
              var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]);
              // Add the marker to the Fluster
              if (clustering) {
                  fluster.addMarker(createMarker(hotel, myLatLng)); 
              } else {
                  map.addMarker(createMarker(hotel, myLatLng));
              }
          }
      }
  
      function createMarker(hotel, latlng, i) {
          var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              icon: hotel[4],
              shape: iconShape,
              title: hotel[2],
              zIndex: 1
          });
  
  
  
          google.maps.event.addListener(marker, "click", function() {
              if (infowindow) infowindow.close();
              infowindow = new google.maps.InfoWindow({content: '&lt;h5&gt;' + hotel[2] + '&lt;/h5&gt;&lt;a href="#hotelid' + hotel[3] + '"&gt;Book now&lt;/a&gt;'});
              infowindow.open(map, marker);
          });
          return marker;
      }
  
  
  
  
  
  
  
      if (clustering) {
          // Set fluster styles for more than 0, 10, 20 and 40 markers
          fluster.styles = {
              0: {
                  //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m1.png',
                  image: 'img/markers/fluster0.png',
                  textColor: '#FFFFFF',
                  width: 54,
                  height: 54
              },
              10: {
                  //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m2.png',
                  image: 'img/markers/fluster1.png',
                  textColor: '#FFFFFF',
                  width: 58,
                  height: 58
              },
              20: {
                  //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m3.png',
                  image: 'img/markers/fluster2.png',
                  textColor: '#FFFFFF',
                  width: 66,
                  height: 66
              },
              40: {
                  //image: 'http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0/images/m4.png',
                  image: 'img/markers/fluster3.png',
                  textColor: '#FFFFFF',
                  width: 80,
                  height: 80
              }
          };
  
          // Initialize Fluster
          // This will set event handlers on the map and calculate clusters the first time.
          fluster.initialize(); 
      }
  
      // Do we need street view?
      if (panoramaID != '') {
          var panoramaOptions = {
              position: latlng,
              pov: {
                  heading: 34,
                  pitch: 10,
                  zoom: 1
              }
          };
          var panoramaView = new google.maps.StreetViewPanorama(document.getElementById(panoramaID), panoramaOptions);
          map.setStreetView(panoramaView);
      }
  
      mapDrawn = true;
  
  }
  
  // mapSetCenter() - Relocate/center a Google map
  Site.mapSetCenter = function(lat, lng, zoom) {
  map.setCenter(new google.maps.LatLng(lat, lng));
      if (zoom &gt; 0) map.setZoom(zoom);
  }
  </code></pre>