Allow InfowWindow anchor to be a <Marker/> component

[uriklar]

Right now supports only position property

[eur2]

Hi, I'm trying to make a Circle marker with a InfoWindow popup. Any documentation or example about it? Many thanks in advance

[uriklar]

Hi @grdpr,
Something like this? https://codesandbox.io/s/2vx96zljk0
You can give the marker a circle icon using the icon property, or even use an actual circle instead

P.S. Any reason you want to use an InfoWindow instead of an OverlayView? InfoWindow gives you some default styles you can't control and also the X close button that closes it without going through react

[eur2]

Thanks @uriklar! I'll give a try to render a list of markers with this InfoWindow and also with OverlayView to feel the difference. OverlayView isn't include in the API from GoogleMaps right?

[uriklar]

Included indeed: https://developers.google.com/maps/documentation/javascript/reference/overlay-view#OverlayView
Take note that you don't need to handle the onAdd, onDraw etc... callbacks. We handle them for you.

[eur2]

Thanks for all this work!
I'm struggling by testing many react-google-map-package.
Is there any onClick event possible on the wrapper to listen for a click?

[uriklar]

Not sure what you mean by "wrapper" but almost every component exposes an onClick event handler

[eur2]

@uriklar the onClick event handler works well on the map!
But I'm still struggling to render multiple markers with InfoWindow. When I open one infoWindow, all infoWindow are opening.

[urikphytech]

Do you want to share a codesandbox?
I wouldn't create multiple info windows. I'd create one info window and pass it the props depending on the selected marker (I.E - the marker's position and any info related to the selected marker you want to show)

[eur2]

here it is: https://codesandbox.io/s/l2jn4xm9yl

[michaelsync]

@grdpr https://codesandbox.io/s/l2jn4xm9yl returns 404.

[Kiel-H-Byrne]

how do we pass the anchor Marker object from an onHover?
seems like we can only populate some state or store with onLoad

[uriklar]

@tdotholla I didn't quite understand what you're asking

[Kiel-H-Byrne]

@tdotholla I didn't quite understand what you're asking

No problem. it was explained better by @FredyC here (#18 (comment))

I think also you guys implemented his suggestions or pull requests... so i can hop off of this thread.
I didn't realized i may have hijacked it a bit.

Also i don't use "anchor" parameter and my infowindow is nested outside or Marker tags... not sure if that helps but it's working great for me with InfoWindow just having "position" parameter.

[JustFly1984]

published 1.2.3-alpha.1

[JustFly1984]

@tdotholla please test

[hswope-arcweb]

Is this still open? There are error messages (infoWindow.tsx line 79) that indicate the component is expected to be rendered inside a Marker, but it doesn't look like the code is there to do this yet???

[JustFly1984]

@uriklar please look at this issue, I have no time today

[uriklar]

@hswope-arcweb The error message on line 79 is only triggered if there's no anchor or position property defined. There currently is anchor support, but it's not very usable. It requires you to pass in a google Marker object (as opposed to a component which would be a much nicer behaviour)

Instead of using an anchor, i'd go with the approach detailed in this sandbox:
https://codesandbox.io/s/x200klrl5w

[hswope]

@uriklar Thanks for the reply. That makes sense. I ended up going with an OverlayView for my implementation anyway, which had its own challenges associating it (visually) with a marker. If time allows, I was thinking of adding some functionality to the OverlayView component and putting in a PR. In general, I like this library. Although new, it is tight and clean. Thanks for your work.

[JustFly1984]

@hswope You are welcome!

[kahlan88]

You can pass offset to InfoWindow
options={{ pixelOffset: new window.google.maps.Size(0, -32) }}

Where the first is left offset and the second number is top/bottom offset. You might need to experiment a little, but in my case it was -pinIcon scaledSize height (38) + (half label origin size (13/2 - I used 6)).

My icon looks like

  const icon: google.maps.Icon = {
    labelOrigin: new window.google.maps.Point(13, 13),
    scaledSize: new window.google.maps.Size(28, 38),
    url: getIconUrl()
  };

[SpangleLabs]

Just to clarify, does this issue mean that this does not work:
https://github.com/JustFly1984/react-google-maps-api/blob/master/packages/react-google-maps-api/src/components/drawing/InfoWindow.tsx#L78

In my attempts at putting InfoWindow inside a Marker, I get that error: You must provide either an anchor (typically render it inside a <Marker>) or a position props for <InfoWindow>.

I would rather not hack about passing markers into my InfoWindow manually, or setting position, so I am tempted to try and fix this in a PR, provided I'm understanding the issue right?

[brunopopf]

Hi!

Any idea how to open an InfoWindow?

This is what I am looking for:

https://developers.google.com/maps/documentation/javascript/infowindows#open

[drokho]

I am new-ish to react and google maps, but I just nudged my infowindows up using negative margin so they aren't covering the markers. I have the infowindows and markers using the same lat, long position.

.gm-style-iw.gm-style-iw-c, .gm-style-iw-tc { margin-top: -30px; }