Comments (24)
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.
Related Issues (20)
- Error when navigate from every page that integrating google to another one and vice versa Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. HOT 1
- Infowindow text hiding the marker in deployment but in localhost it's looking good
- Show markers on top of marker clusterers
- Supported by Google new react integration with google maps api @vis.gl/react-google-maps
- i have placeId and I want to border the area with placeid, what should I do? HOT 1
- Border the area and style of map
- React Error: Maximum update depth exceeded after navigating back & forth with useJsApiLoader
- Site with a description of API does not work HOT 5
- how to disable map zoom when DirectionsRenderer redraws the path HOT 1
- onLoad prop return type error, but the map loads correctly
- MarkerClusterer onClick event doesn't have default click event params
- Custom controls
- Autocomplete not working on android browser, after useJsApiLoader execute the isLoaded not turned to true
- Doc link is broken HOT 4
- Document link is broken HOT 2
- Doc site not working HOT 1
- Right click doesn't work in InfoBox component HOT 2
- Loading google maps JS API HOT 7
- This page can't load Google Maps correctly. For developmental purposes only.
- Docs link broken HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-google-maps-api.