Allow InfowWindow anchor to be a <Marker/> component about react-google-maps-api HOT 24 CLOSED

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()
  };

from react-google-maps-api.

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

from react-google-maps-api.

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

from react-google-maps-api.

@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

from react-google-maps-api.

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

from react-google-maps-api.

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

from react-google-maps-api.

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?

from react-google-maps-api.

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.

from react-google-maps-api.

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?

from react-google-maps-api.

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

from react-google-maps-api.

@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.

from react-google-maps-api.

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)

from react-google-maps-api.

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

from react-google-maps-api.

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

from react-google-maps-api.

@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.

from react-google-maps-api.

published 1.2.3-alpha.1

from react-google-maps-api.

@tdotholla please test

from react-google-maps-api.

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???

from react-google-maps-api.

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

from react-google-maps-api.

@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.

from react-google-maps-api.

@hswope You are welcome!

from react-google-maps-api.

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?

from react-google-maps-api.

Hi!

Any idea how to open an InfoWindow?

This is what I am looking for:

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

from react-google-maps-api.

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; }

from react-google-maps-api.