It wasnt allowing me to move in any direction or to zoom in or out. To do this, you have to use defaultZoom and defaultCenter. If not, the map will be in a fixed position.
Is the info window style-able or do we have to implement a custom component for that? edit for anyone with the same question: The InfoWindow component in this library is using the google.maps.InfoWindow class under the hood so your application cannot fully control the styling of the window or the close button. I've tried to implement a dark mode in the past and ran into issues with styling the google.maps.InfoWindow class for which my workaround was to extend the CustomOverlay class to implement a "custom info window" - not sure if there's a better solution for this now as this was 2 yrs ago but definitely seems like it should be part of this new library.
Thanks for raising this on GitHub! Others interested in custom info window support, chime in on this issue: github.com/visgl/react-google-maps/issues/83
hello, how can i take screenhot to maps without the other elements, for example; drawing manager or tilt setting button, i want to take just maps image like i done with mapbox.getcanvas function
How can you load the broader Google Maps Javascript API in React so outside of tags, features such as google.maps. elements can be used? I have not been able to find any documentation for this.
how can i show the maps, is it next start? but it says: next : The term 'next' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + next start + ~~~~ + CategoryInfo : ObjectNotFound: (next:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException
Hello. I'm using const places = useMapsLibrary("places") to implement autocomplete. But it doesn't work, the variable places always null. please help me
We've added a Marker Clustering sample to visgl.github.io/react-google-maps/examples with source code at github.com/visgl/react-google-maps/tree/main/examples/marker-clustering
You can learn more about billing and credits for use of the Maps JavaScript API at developers.google.com/maps/documentation/javascript/usage-and-billing
Yes Danny! Yes, it does, and it has to be public to use maps... but that's no problem because Google provides a way to add restrictions for your API Key. You can restrict it to the Web, to specific APIs, and you can restrict it to your website only... so if someone copies it and tries to use it on their website, it won't work. You should definitely add the appropriate restrictions any time you're using an API Key from Google.
Here's a video on restricting your API key: ua-cam.com/video/2_HZObVbe-g/v-deo.htmlsi=J9HCo0znWLhW3WST&t=87 and detailed recommendations at developers.google.com/maps/api-security-best-practices
❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💛💛💛💛💛💛💛💛💛💛💛💛💛🤲💯💯Thanks a Lot my honourable lovely all of my Soulful & faithful friends. Again,Thank you.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯
🙋 Do you have any questions about React or the API?
Let us know below and subscribe for more Google Maps Platform tips → goo.gle/GoogleMapsPlatform
Is this library free to use? If not, where to find pricing list?
Thank you ! Very nice and simple explanation.
does it work with latest react?
because i am having the peer dependency issue
Thank you Leigh!
This is great news! Keep them videos coming, really curious what this library will allow… in the meantime I’ll spend some time reading the docs 🙏🏻
okay, thanks for nice tutorial and helpful comments
This is very helpful ♥️thank you 🙏🏾
It wasnt allowing me to move in any direction or to zoom in or out. To do this, you have to use defaultZoom and defaultCenter. If not, the map will be in a fixed position.
can i ask you how? i have the issues you told.
@@cpn1011 instead of using the property zoom={9} use defaultZoom={9}, same goes for center
Thank you:) eventually i solved the issue from your saying.
@@cpn1011 For anyone else trying to figure this out, you need to replace the zoom and center props with defaultZoom and defaultCenter!
thanks
instead of zoom and center, use defaultZoom and defaultCenter. Otherwise you cant zoom or drag around the map.
Is the info window style-able or do we have to implement a custom component for that?
edit for anyone with the same question:
The InfoWindow component in this library is using the google.maps.InfoWindow class under the hood so your application cannot fully control the styling of the window or the close button.
I've tried to implement a dark mode in the past and ran into issues with styling the google.maps.InfoWindow class for which my workaround was to extend the CustomOverlay class to implement a "custom info window" - not sure if there's a better solution for this now as this was 2 yrs ago but definitely seems like it should be part of this new library.
Thanks for raising this on GitHub! Others interested in custom info window support, chime in on this issue: github.com/visgl/react-google-maps/issues/83
can you make more videos for this library please
hello, how can i take screenhot to maps without the other elements, for example; drawing manager or tilt setting button, i want to take just maps image like i done with mapbox.getcanvas function
How can you load the broader Google Maps Javascript API in React so outside of tags, features such as google.maps. elements can be used? I have not been able to find any documentation for this.
how can i show the maps, is it next start? but it says:
next : The term 'next' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if
a path was included, verify that the path is correct and try again.
At line:1 char:1
+ next start
+ ~~~~
+ CategoryInfo : ObjectNotFound: (next:String) [], CommandNotFoundException
+ FullyQualifiedErrorId : CommandNotFoundException
How did you create that theme?
Is there a way to make the map responsive to screen height or width changes? I tried width: 100% and it does not work
Hello.
I'm using const places = useMapsLibrary("places") to implement autocomplete. But it doesn't work, the variable places always null. please help me
How do I integrate places autocomplete with this?
The npm page says it's still in alpha. Isn't it safe for production yet?
Are those '&&' in line 28 at last moment?
Anyone knows how to implement marker clustering with this new library?
We've added a Marker Clustering sample to visgl.github.io/react-google-maps/examples with source code at github.com/visgl/react-google-maps/tree/main/examples/marker-clustering
i couldn't find the library what you use for the ApiProvider component
It comes from the line that imports the @vis.gl/react-google-maps library:
import { APIProvider } from "@vis.gl/react-google-maps";
How can I just display the map of a specific country?
Is it totoally free? Do I need to give credit card information?
You can learn more about billing and credits for use of the Maps JavaScript API at developers.google.com/maps/documentation/javascript/usage-and-billing
Unable to pan the map left, right, up or down
defaultCenter and defaultZoom not center and zoom
Please correct the video by changing the Map props from zoom and center to Default zoom and defaultcenter
Do you have some example using Pegman (the yellow man for street view hahaha)?
what should be the type of map id in the typescript ? the key is output to the console, and id undefined
error in console The map is initialized without a valid Map ID, which will prevent use of Advanced Markers.
when i use type string
can i only show the africa map using javascript and react.
doesn’t this make the google maps api key public?
Yes Danny! Yes, it does, and it has to be public to use maps... but that's no problem because Google provides a way to add restrictions for your API Key. You can restrict it to the Web, to specific APIs, and you can restrict it to your website only... so if someone copies it and tries to use it on their website, it won't work. You should definitely add the appropriate restrictions any time you're using an API Key from Google.
Here's a video on restricting your API key: ua-cam.com/video/2_HZObVbe-g/v-deo.htmlsi=J9HCo0znWLhW3WST&t=87 and detailed recommendations at developers.google.com/maps/api-security-best-practices
is it an official google team channel and library? or just a channel who really good pretend to be?
Why react and not angular?
Doesn't it support mobile? The map looks very bad on mobile.
zooming by mouse not working!
Zoom doesn't work, map won't zoom in or out
nevermind, just fixed this by changing zoom props to defaultZoom
I'm I the only that could not install the package because of the splitting error showing on the terminal
you'll be able to install it just fine in your command prompt not via vs code terminal
@@ene_andre okay thanks
@@ene_andre but it doesnt shows their files in vscode
@@Vandana_pawar Hi, it worked for me tho, maybe ensure you are installing the package from your cmd in the exact project path you are working on
Gracias o/
De nada!
>works at google
>not using chromebook
bro failed the vibecheck
❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💛💛💛💛💛💛💛💛💛💛💛💛💛🤲💯💯Thanks a Lot my honourable lovely all of my Soulful & faithful friends. Again,Thank you.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯