From 92b502bd2d1a591bcdeb552f99390e9ae64ff3a8 Mon Sep 17 00:00:00 2001
From: Matt Togstad <mtogstad@gmail.com>
Date: Wed, 16 May 2018 21:56:31 -0500
Subject: [PATCH] Option to position and size components with two corners.
 (#580)

* Option to position components with two corners.

This lets you lock a component to a specific bounding rectangle, which allows for precise tiling during zoom.

* Add a comment explaining two point positioning.
---
 src/google_map_markers.js | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/google_map_markers.js b/src/google_map_markers.js
index 71abc15..29c0ac3 100644
--- a/src/google_map_markers.js
+++ b/src/google_map_markers.js
@@ -269,11 +269,33 @@ export default class GoogleMapMarkers extends Component {
           ? this.props.geoService.fromLatLngToContainerPixel(latLng)
           : this.props.geoService.project(latLng);
 
-        const stylePtPos = {
+        let stylePtPos = {
           left: pt.x,
           top: pt.y,
         };
 
+        // If the component has a southeast corner defined (either as a LatLng, or a separate
+        // lat and lng pair), set the width and height based on the distance between the northwest
+        // and the southeast corner to lock the overlay to the correct geographic bounds.
+        if (
+          child.props.seLatLng !== undefined ||
+          (
+            child.props.seLat !== undefined &&
+            child.props.seLng !== undefined
+          )
+        ) {
+          const seLatLng = child.props.seLatLng !== undefined
+            ? child.props.seLatLng
+            : {lat: child.props.seLat, lng: child.props.seLng};
+
+          const sePt = this.props.projectFromLeftTop
+            ? this.props.geoService.fromLatLngToContainerPixel(seLatLng)
+            : this.props.geoService.project(seLatLng);
+
+          stylePtPos.width = sePt.x - pt.x;
+          stylePtPos.height = sePt.y - pt.y;
+        }
+
         let dx = 0;
         let dy = 0;