MicheleBertoli / react-gmaps

A Google Maps component for React.js

Home Page:http://react-gmaps.herokuapp.com/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Marker event listener for infoWindow

hermawan22 opened this issue Β· comments

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

Thanks man for your great job. πŸ‘

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.

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.

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. πŸ‘

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.

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. πŸ‘