How to get true centerpoint of offset marker - google-maps-api-3

Question

I don't think this has been asked before - I can't find any answers to this through searching SO and Google, and I find this sort of odd so maybe I'm overlooking something..
Anyways, I am creating a pretty standard series of markers based on lat/lng coordinates, although very often the markers will "stack" on top of each other, since they are at the same lat/lng coordinates. We aren't looking to cluster the markers when this happens, we are offsetting them instead so they appear side by side.
The problem I'm having though, is when I call marker.getPosition to get the lat/lng object of the marker's position, it isn't taking into account the offset. It's giving the original lat/lng coordinates of the centerpoint of where the marker was placed before it was offset.
Is there a way I can find the TRUE centerpoint of a marker, taking its offset into account? I know what the offset is in pixels, if that helps.
Here's a code snippet of what I'm doing
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var latlng = marker.getPosition();
So when I do
var lat = latlng.lat();
var lng = latlng.lng();
it seems like I get the position of the marker, and not the offset position of the icon that represents the marker. Does anyone know how I can get the offset position of the icon as a latlng object?

Answer 1

You can compute the position:
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
proof of concept fiddle
code snippet:
var map;
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP,
});
overlay = new google.maps.OverlayView();
overlay.draw = function() {};
overlay.setMap(map);
var obj = {
map: map,
icon: "http://maps.google.com/mapfiles/ms/micons/blue.png",
offset_x: 100,
offset_y: 50,
title: "marker",
zIndex: 0
}
var latlng = {
lat: 37.4419,
lng: -122.1419
};
var marker = new google.maps.Marker({
map: obj.map,
position: latlng,
icon: {
url: obj.icon,
size: new google.maps.Size(72, 72),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(obj.offset_x, obj.offset_y),
scaledSize: new google.maps.Size(25, 25)
},
title: obj.title,
zIndex: obj.zIndex
});
var center = new google.maps.Marker({
map: map,
position: latlng,
icon: "http://maps.google.com/mapfiles/ms/micons/green.png",
title: "center",
draggable: true
});
google.maps.event.addListener(overlay, "projection_changed", function() {
// if (!overlay.getProjection()) return;
var markerPt = overlay.getProjection().fromLatLngToDivPixel(marker.getPosition());
console.log("markerPt=" + markerPt.toString());
// extra offset to bottom middle of marker (12.5, 25)
var point = new google.maps.Point(markerPt.x - obj.offset_x + 12.5, markerPt.y - obj.offset_y + 25);
console.log("point=" + point.toString());
var latLng = overlay.getProjection().fromDivPixelToLatLng(point);
console.log("latLng=" + latLng.toUrlValue(6));
var newMark = new google.maps.Marker({
map: map,
position: latLng,
icon: {
url: "https://maps.gstatic.com/intl/en_us/mapfiles/markers2/measle.png",
size: new google.maps.Size(7, 7),
anchor: new google.maps.Point(3.5, 3.5)
}
});
var infowindow = new google.maps.InfoWindow();
infowindow.setContent(newMark.getPosition().toUrlValue(6));
infowindow.setOptions({
pixelOffset: new google.maps.Size(0, -25)
});
infowindow.setPosition(newMark.getPosition());
infowindow.open(map);
});
var latlng = marker.getPosition();
console.log("latlng=" + latlng.toUrlValue(6));
var infowindow = new google.maps.InfoWindow();
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>