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;