I want to open google map info-window left-right-top-bottom side according to click on browser window using jquery or javascript -
i want open google map info-window left-right-top-bottom side according click on browser window in picture this original infowindow
this want infowindow open left side.
i have done using jquery,,, question whenever open infowindow it's open first in original position , turn left or right side.i want open directly left or right side.
this code...
// replace info window's content , 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);
Comments
Post a Comment