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

Question

I am trying to display completely custom info windows over map markers on marker click. I have successfully implemented this answe

Answer 1

Another option. Use the InfoBox third party library. It inherits from OverlayView, and you can put your "completely custom" div in it.

proof of concept fiddle

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()
  });

  var boxText = document.createElement("div");
  boxText.style.cssText = "border: 1px solid black; margin-top: 8px; background: white; padding: 5px;";
  boxText.innerHTML = "I am a div on top of a google map ..";
  var myOptions = {
    content: boxText,
    disableAutoPan: false,
    maxWidth: 0,
    pixelOffset: new google.maps.Size(-75, -10),
    zIndex: null,
    boxStyle: {
      background: "url('tipbox.gif') no-repeat",
      opacity: 0.75,
      width: "150px"
    },
    closeBoxMargin: "0px 0px 0px 0px",
    closeBoxURL: "",
    infoBoxClearance: new google.maps.Size(0, 0),
    isHidden: false,
    pane: "floatPane",
    enableEventPropagation: false
  };

  var info = new InfoBox(myOptions);

  info.open(map, marker);

  google.maps.event.addListener(marker, 'click', function() {
    // info.setContent('
I am a div on top of a google map ..
');
    info.open(map, marker);
  });
}
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;
}