How to open marker info window outside of Google Map

Can anybody help. I have below code and it's working fine but I would like to open info window outside of Google Map.

Example: <a href='javascript:void(0)' onclick='infoopen("1")'>Marker 1</a>

JavaScript 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 < 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: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'});
            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 > 0) map.setZoom(zoom);
}

---

I know this is a very old question, but it's got a pretty simple answer. Markers are just objects; if you want to refer to them, you've got to keep pointers to them somewhere, e.g. in a globally-accessible array like Site.markers. You can easily stick them into this array at creation time (my changes set off with hyphens):

// Initialize markers for hotels
for (var i = 0; i < hotels.length; i++) {
    var hotel = hotels[i];
    if (hotel[2] != '') {
        var myLatLng = new google.maps.LatLng(hotel[0], hotel[1]);
        // -----------------
        // make marker first and store a reference
        var marker = createMarker(hotel, myLatLng);
        Site.markers.push(marker);
        // -----------------
        if (clustering) {
            // Add the marker to the Fluster
            fluster.addMarker(marker); 
        } else {
            map.addMarker(marker);
        }
    }
}

Then you need an easy way to open the info window on a marker instance, something you're currently putting into the click event. Turning this into a method on the marker makes it easy to call it later outside of an event context:

// make the method
marker.openInfoWindow = function() {
    if (infowindow) infowindow.close();
    infowindow = new google.maps.InfoWindow({content: '<h5>' + hotel[2] + '</h5><a href="#hotelid' + hotel[3] + '">Book now</a>'});
    infowindow.open(map, marker);
};
// put the method in as a handler
google.maps.event.addListener(marker, "click", marker.openInfoWindow);

Now it's easy enough to refer to the marker and call the method: <a href='javascript:void(0)' onclick='Sites.markers[1].openInfoWindow();'>Marker 1</a>