我想打开谷歌地图信息窗口左右上下方根据点击浏览器窗口使用jquery或javascript

Question

我想打开谷歌地图信息窗口左右上下方根据点击浏览器窗口这样在图片中 This is original infowindow

This is what I want infowindow open left side.

我是通过使用jQuery来完成的， 但是我的问题是每当我打开信息窗口时它首先在原始位置打开然后向左或向右转。我想直接向左或向右打开它。

这是我的代码......

// Replace the info window's content and position.
infoWindow.setContent(contentString);
infoWindow.setPosition(event.latLng);                      

var domReady = true;
google.maps.event.addListener(infoWindow, 'domready', function () {
    if(document.getElementById('iw_content')!=null){
        el = document.getElementById('iw_content').parentNode.parentNode.parentNode;
    }                   
    if(domReady == true){
        if(properties.type == "top" || properties.type == "left" || properties.type == "right"){
            domReady = false;
            el.parentNode.setAttribute('id', 'infoWinId');  
            /*$("#infoWinId").removeAttr('id', 'infoWinId');*/
            $("#infoWinId").html('<div style="cursor: default; position: absolute; width: 453px; height: 288px; z-index: 101;top: '+ properties.bodyTop +'px; left: '+ properties.bodyLeft +'px;">'+
                                                '<div style="position: absolute; left: 0px; top: 0px;">'+
                                                    '<div style="width: 0px; height: 0px; border-right: 10px solid transparent; border-left: 10px solid transparent; border-top: 24px solid rgba(0, 0, 0, 0.1); position: absolute; left: 217px; top: 288px;display:none;"></div>'+
                                                    '<div style="position: absolute; left: 0px; top: 0px; background-color: rgba(0, 0, 0, 0.2); border-radius: 2px; box-shadow: 0px 1px 4px -1px rgba(0, 0, 0, 0.3); width: 453px; height: 288px;"></div>'+
                                                    '<div style="border-top-width: 24px; position: absolute; left: '+ properties.arrowLeft +'px; top: '+ properties.arrowTop +'px;transform: rotate('+ properties.arrowRotate +'deg);">'+
                                                        '<div style="position: absolute; overflow: hidden; left: -6px; top: -1px; width: 16px; height: 30px;">'+
                                                            '<div style="position: absolute; left: 6px; background-color: rgb(255, 255, 255); transform: skewX(22.6deg); transform-origin: 0px 0px 0px; height: 24px; width: 10px; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);"></div>'+
                                                        '</div>'+
                                                        '<div style="position: absolute; overflow: hidden; top: -1px; left: 10px; width: 16px; height: 30px;">'+
                                                            '<div style="position: absolute; left: 0px; background-color: rgb(255, 255, 255); transform: skewX(-22.6deg); transform-origin: 10px 0px 0px; height: 24px; width: 10px; box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.6);"></div>'+
                                                        '</div>'+
                                                    '</div>'+
                                                    '<div style="position: absolute; left: 1px; top: 1px; border-radius: 2px; background-color: rgb(255, 255, 255); width: 451px; height: 286px;"></div>'+
                                                '</div>'+
                                                '<div style="top: 9px; position: absolute; left: 15px; width: 423px;" class="gm-style-iw">'+
                                                    '<div style="display: inline-block; overflow: auto; max-height: 447px; max-width: 400px;">'+
                                                        '<div style="overflow: auto;">'+ contentString +'</div>'+
                                                    '</div>'+
                                                    '<div style="border-top: 1px solid rgb(204, 204, 204); margin-top: 9px; padding: 6px; visibility: hidden; font-size: 13px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-family: Roboto, Arial; display: none;">'+
                                                        '<a href="" target="_blank" style="cursor: pointer; color: rgb(66, 127, 237); text-decoration: none;">View on Google Maps</a>'+
                                                    '</div>'+
                                                '</div>'+
                                                '<div id="closeInfoWindowId" style="width: 13px; height: 13px; overflow: hidden; position: absolute; opacity: 0.7; right: 12px; top: 10px; z-index: 10000; cursor: pointer;">'+
                                                    '<img style="position: absolute; left: -2px; top: -336px; width: 59px; height: 492px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; max-width: none;" src="http://maps.gstatic.com/mapfiles/api-3/images/mapcnt6.png" draggable="false">'+
                                                '</div>'+
                                            '</div>');                                             
                    }
                }                   
                $('#closeInfoWindowId').click(function() {
                    infoWindow.close();
                }); 
            });          
            infoWindow.open(map, newPolygon);