tomchentw / react-google-maps

React.js Google Maps integration component
https://tomchentw.github.io/react-google-maps/
MIT License
4.62k stars 939 forks source link

Custom InfoWindow #1000

Closed whojes closed 4 years ago

whojes commented 4 years ago

Summary

I'm looking for a way to create custom infowindow. In react-google-maps an infoWindow is only for a marker i guess, I tried to create an infowindow with 'new google.maps.InfoWindow', and failed to open it. i'm using react-google-maps version "9.4.5".

Snippet

// this is my MarkerClusterer onClick function
_markerClusterClick = async (markerCluster) => {
    const markersData = markerCluster.getMarkers().map(x => this.data.orders[x.title]);
    const iw = new window.google.maps.InfoWindow({
      content: renderToString(<PluralValues values={ markersData }/>)
    });

    const map1 = window.google.maps.Map;
    const map2 = this.data.map;  
    iw.setPosition(this.data.currentCenter); 
    iw.open(map1); 
    iw.open(map2);
  }

// this.data.map (map2) is set here
return (
  <div>
    <GoogleMap
      ref={(map) => this.data.map = map}
      { props... }
...
)

when i tried with map1 or map2,

infowindow.js:11 Uncaught (in promise) TypeError: Cannot read property 'get' of undefined
    at pf.d (infowindow.js:11)
    at _.S.ma (js?v=3.exp&libraries=geometry,drawing,placesmaps&key=AIzaSyBCpFlL1pK26gRZjnG8gVaZhRdUEjh-QCM&language=kr:182)
    at Object.oj (infowindow.js:11)
    at js?v=3.exp&libraries=geometry,drawing,placesmaps&key=AIzaSyBCpFlL1pK26gRZjnG8gVaZhRdUEjh-QCM&language=kr:100

an error occurred.

Is there any way to open custom infowindow, not only for markerclusterers, just at arbitrary LatLng without any markers?

stack overflow

I found the same issue and no one answer this.

please enlighten me

JustFly1984 commented 4 years ago

Hello @whojes This library is unmaintained almost two years. We have build new npm package @react-google-maps/api.

We have a community, docs and examples

whojes commented 4 years ago

oh, i was happy i'm 1000th issuer. see you there~