javascript - Google Maps: Get click or marker (x,y) pixel coordinates inside marker click listener -

i trying display completely custom info windows on map markers on marker click. have implemented this answer div show on map-canvas click... not able replicate on marker click.

is possible markers pixel position inside of marker click function, , suppress normal infowindow show desired custom infowindow?

i tried this:

      google.maps.event.addlistener(marker, 'click', function(args) {         var x=args.pixel.x+$('#map').offset().left; //we clicked here         var y=args.pixel.y;          info.style.left=x+'px';         info.style.top=y+'px';         info.style.display='block';       }); 

but in console, see:

uncaught typeerror: cannot read property 'x' of undefined 

a marker click event returns mouseclickevent

the documented property of mouseclickevent is:

latlng latlng latitude/longitude below cursor when event occurred.

to convert pixel position use fromlatlngtocontainerpixel method of mapcanvasprojection:

    google.maps.event.addlistener(marker, 'click', function (e) {        var point = overlay.getprojection().fromlatlngtodivpixel(e.latlng);              info.style.left = point.x + 'px';             info.style.top = point.y + 'px';             info.style.display = 'block';     }); 

working fiddle

code snippet:

var geocoder;  var map;  var overlay;    function initialize() {      var map = new google.maps.map(      document.getelementbyid("map_canvas"), {          center: new google.maps.latlng(37.4419, -122.1419),          zoom: 13,          maptypeid: google.maps.maptypeid.roadmap      });      var marker = new google.maps.marker({          map: map,          draggable: true,          position: map.getcenter()      });        google.maps.event.addlistener(map, 'projection_changed', function () {          overlay = new google.maps.overlayview();          overlay.draw = function () {};          overlay.setmap(map);            var info = document.getelementbyid('myinfo');          google.maps.event.addlistener(marker, 'click', function (e) {             var point = overlay.getprojection().fromlatlngtocontainerpixel(e.latlng);                   info.style.left = (point.x - 100)+ 'px';                  info.style.top = (point.y) + 'px';                  info.style.display = 'block';          });          google.maps.event.addlistener(map, 'center_changed', function (e) {              var point = overlay.getprojection().fromlatlngtocontainerpixel(marker.getposition());                   info.style.left = (point.x - 100)+ 'px';                  info.style.top = (point.y) + 'px';                  info.style.display = 'block';          });                  google.maps.event.addlistener(marker, 'drag', function (e) {             var point = overlay.getprojection().fromlatlngtocontainerpixel(marker.getposition());                   info.style.left = (point.x - 100)+ 'px';                  info.style.top = (point.y) + 'px';                  info.style.display = 'block';          });                });  }  google.maps.event.adddomlistener(window, "load", initialize);

html,  body,  #map_canvas {    height: 100%;    width: 100%;    margin: 0px;    padding: 0px  }  div.info {    position: absolute;    z-index: 999;    width: 200px;    height: 50px;    display: none;    background-color: #fff;    border: 3px solid #ebebeb;    padding: 10px;  }

<script src="https://maps.googleapis.com/maps/api/js"></script>  <div id="map_canvas" style="border: 2px solid #3872ac;"></div>  <div id="myinfo" class="info">    <p>i div on top of google map ..</p>  </div>