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.
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 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
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.
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
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.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯
![[UA] Team Vitality проти NAVI | IEM Cologne 2024](http://i.ytimg.com/vi/wttO1zVRTC0/mqdefault.jpg)
🙋 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?
use defaultZoom and defaultCenter so you can drag and zoom instead of zoom and center props
hey men, god bless you, you saved me, i've been loking this solution for an entire day, big kiss for you 😘😘
Thank you ! Very nice and simple explanation.
This is very helpful ♥️thank you 🙏🏾
does it work with latest react?
because i am having the peer dependency issue
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
instead of zoom and center, use defaultZoom and defaultCenter. Otherwise you cant zoom or drag around the map.
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.
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
Unable to pan the map left, right, up or down
defaultCenter and defaultZoom not center and zoom
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
Is there a way to make the map responsive to screen height or width changes? I tried width: 100% and it does not work
Please correct the video by changing the Map props from zoom and center to Default zoom and defaultcenter
How can I just display the map of a specific country?
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.
can you make more videos for this library please
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
How do I integrate places autocomplete with this?
Why react and not angular?
Do you have some example using Pegman (the yellow man for street view hahaha)?
How did you create that theme?
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
The npm page says it's still in alpha. Isn't it safe for production yet?
can i only show the africa map using javascript and react.
Are those '&&' in line 28 at last moment?
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
zooming by mouse not working!
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";
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
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
Doesn't it support mobile? The map looks very bad on mobile.
is it an official google team channel and library? or just a channel who really good pretend to be?
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!
Zoom doesn't work, map won't zoom in or out
nevermind, just fixed this by changing zoom props to defaultZoom
❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💛💛💛💛💛💛💛💛💛💛💛💛💛🤲💯💯Thanks a Lot my honourable lovely all of my Soulful & faithful friends. Again,Thank you.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯