MicheleBertoli / react-gmaps

A Google Maps component for React.js
http://react-gmaps.herokuapp.com/
MIT License
317 stars 68 forks source link

Marker event listener for infoWindow #112

Closed hermawan22 closed 7 years ago

hermawan22 commented 7 years ago

Hi, it's possible if there have a feature for open infowindow when click on marker?

Thanks man for your great job. 👍

copperstick6 commented 7 years ago

Hey!
One way you could design your markers to do so is to just use the maps API. Here's how you would do it.

var marker = .... //initialize marker here.
marker.addListener('click', function(){
   var infowindow = ... //initialize infowindow here
   infowindow.setMap(map)   //where map is your map instance
});
marker.setMap(map)   //where map is your map instance   

Let me know if you run into any more issues.

MicheleBertoli commented 7 years ago

Thank you very much for opening the issue @hermawan22 and @copperstick6 for suggesting a solution. Here is also a similar issue #40 with an example. I hope this helps.

hermawan22 commented 7 years ago

Thanks for your response @MicheleBertoli and suggest me #40. But the position is still not appropriate with marker (still cover the marker). And if possible could you advice me, how to share event between difference component on react without any state management? Component1 trigger event -> Component2 listen the triggered event. Component1 and Component2 don't have any relation (totally different component). My case is i want trigger the click event marker on different component. Thanks @MicheleBertoli. :)

@copperstick6 thanks man. :)

const marker = ...
marker.addListener("click", () => {
  infoWindow.open(map, marker);
});

I have been did it with just google maps API, it will be more useful if any feature for it in here. 👍

MicheleBertoli commented 7 years ago

For the position of the InfoWindow, you can use pixelOffset={new google.maps.Size(0, -40)}. While to trigger the InfoWindow from a different component, you can use the "closest common ancestor" (see Lifting State Up).

Here is a demo:

infowindow

And here is the source code.

I hope this helps @hermawan22.

hermawan22 commented 7 years ago

Thanks @MicheleBertoli, this is what i looking for infowindow.

Ah, my apologies my questions is not so clearly, i mean for share event between difference component (in my case is the each other of component not have any relation). That is possible to share event between them without state management?

And it possible if i have any other question for you from your code? Thanks for your kindness sir. 👍