CODEWITHSUNDEEP
reactjsmarker
Lexie
Lexie

Reputation: 11

How to move infoWindow in google map API

I have an issue with displaying the infoWindow in Google Maps API in create-react-app. The matter is that is hides the marker when it is clicked. Is it possible to somehow move this infoWindow a bit higher above the marker?

here is the repo https://github.com/Lexie14/Neighborhood-Map

map

Upvotes: 1

Views: 1502

Answers (2)

Sudeep Bashistha
Sudeep Bashistha

Reputation: 1618

You can try this.

<InfoWindow
  options={{
    pixelOffset: new window.google.maps.Size(
      0, -30
    )
  }}
  position={{
    lat: 1.234,
    lng: 5.1234
  }}
>
  <div>
    Hello World!!
  </div>
</InfoWindow>

Upvotes: 1

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59358

You could utilize InfoWindowOptions.pixelOffset property to set offset in pixels, here is an example how to set it for google-maps-react InfoWindow:

<InfoWindow 
     pixelOffset={new google.maps.Size(0,-48)}
     position={this.state.selectedItem.position}
     visible={this.state.showingInfoWindow}>
     <div>
       <h1>{this.state.selectedItem.title}</h1>
     </div>
</InfoWindow>

There is also another option where info window position could be adjusted automatically, for that matter marker (anchor) property needs to be specified instead of position: 

<InfoWindow
    marker={this.state.activeMarker}
    visible={this.state.showingInfoWindow} >
    <div>
      <h1>{this.state.selectedItem.title}</h1>
    </div>
 </InfoWindow>

Here is a demo for your reference

Upvotes: 0

Related Questions