CODEWITHSUNDEEP
google-maps-api-3
Rich
Rich

Reputation: 301

How to get true centerpoint of offset marker

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?

Upvotes: 1

Views: 436

Answers (1)

geocodezip
geocodezip

Reputation: 161324

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>

Upvotes: 1

Related Questions