How can I prevent the dimensions of an OverlayView from adjusting when zooming?

Question

I want to use the OverlayView component to show an image on top of the map. However, I'm having trouble preventing the image from scaling as I zoom. Basically, I want the corners of the image to stay at one single lat, lng position, i.e. shrink as I zoom out and vice versa.

I believe that the getPanes() and getProjection() methods provide all the information I need, but I just don't know when/how to use them correctly. I also think the GroundOverlay component might be a good alternative but I need to be able to control the rotation of the image (which I believe can only be done with the OverlayView).

Below is the example in react-google-maps that correctly renders a div on a map, but the div scales as it zooms.

const MapWithAnOverlayView = compose(
  withStateHandlers(() => ({
    count: 0,
  }), {
    onClick: ({ count }) => () => ({
      count: count + 1,
    })
  }),
  withScriptjs,
  withGoogleMap
)(props =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: 62.300471, lng: -150.644 }}
  >
    <OverlayView
      bounds={{
        ne: { lat: 62.400471, lng: -150.005608 },
        sw: { lat: 62.281819, lng: -150.287132 }
      }}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <div style={{ background: `white`, border: `1px solid #ccc`, padding: 15 }}>
        <h1>OverlayView</h1>
      </div>
    </OverlayView>
  </GoogleMap>
);

<MapWithAnOverlayView
  googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzasyT4miXrhCF4G5AwXI7sQNF6rvQJYpvjoP8&v=3.exp&libraries=geometry,drawing,places"
  loadingElement={<div style={{ height: `100%` }} />}
  containerElement={<div style={{ height: `400px` }} />}
  mapElement={<div style={{ height: `100%` }} />}
/>

I would expect that the div in the example would shrink as I zoom out and vice versa.

Also, here is a link to the docs that I've been using https://tomchentw.github.io/react-google-maps/#overlayview and here is the regular example the Google provides https://developers.google.com/maps/documentation/javascript/examples/overlay-simple

Basically, I just want the example to in the first link to behave like the second one. Any help would be greatly appreciated!

score 0 · Answer 1 · answered Aug 10 '19 at 22:05

To create a custom overlay containing image which fits map bounds, OverlayView component could be initialized like this:

<OverlayView
    bounds={{
      ne: { lat: 62.281819, lng: -150.287132 },
      sw: { lat: 62.400471, lng: -150.005608 }
    }}
    mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
  >
    <img
      style={{ width: "100%", height: "100%", position: "absolute" }}
      src="https://developers.google.com/maps/documentation/javascript/examples/full/images/talkeetna.png"
    />
 </OverlayView>

Here is a demo

How can I prevent the dimensions of an OverlayView from adjusting when zooming?

1 Answers1