Это видео недоступно.
Сожалеем об этом.
How to load Maps JavaScript API in React (2023)
HTML-код
- Опубликовано: 14 авг 2024
- Learn how to use the Maps JavaScript API in React. In this step-by-step tutorial, Leigh Halliday demonstrates how to get up and running with React and Google Maps Platform in 5 minutes. Watch how to use the new Google-sponsored, vis.gl managed library for React components and hooks that bring Google map elements and services into your web app.
npm install @vis.gl/react-google-maps
Chapters:
0:00 - Intro
0:32 - Installing the API
1:34 - Installing the @vis.gl/react-google--maps package
2:39 - Setting up a map ID
3:14 - Adding markers
4:18 - Adding info windows to markers
6:02 - Wrap up
Links:
Source code → goo.gle/3FFYhKm
Get an API Key → goo.gle/js-api...
Get a Map ID → goo.gle/get-ma...
Homepage for vis.gl/react-google-maps → goo.gle/47cOk38
Watch more Geocasts → goo.gle/Geocasts
Subscribe to Google Maps Platform → goo.gle/Google...
#GoogleMapsPlatform #Geocasts
🙋 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 😘😘
does it work with latest react?
because i am having the peer dependency issue
Thank you ! Very nice and simple explanation.
This is very helpful ♥️thank you 🙏🏾
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
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
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.
instead of zoom and center, use defaultZoom and defaultCenter. Otherwise you cant zoom or drag around the map.
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 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
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 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.
Unable to pan the map left, right, up or down
defaultCenter and defaultZoom not center and zoom
How can I just display the map of a specific country?
How do I integrate places autocomplete with this?
Do you have some example using Pegman (the yellow man for street view hahaha)?
How did you create that theme?
can you make more videos for this library please
The npm page says it's still in alpha. Isn't it safe for production yet?
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
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
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
can i only show the africa map using javascript and react.
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";
Please correct the video by changing the Map props from zoom and center to Default zoom and defaultcenter
is it an official google team channel and library? or just a channel who really good pretend to be?
Doesn't it support mobile? The map looks very bad on mobile.
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: ruclips.net/video/2_HZObVbe-g/видео.htmlsi=J9HCo0znWLhW3WST&t=87 and detailed recommendations at developers.google.com/maps/api-security-best-practices
zooming by mouse not working!
Gracias o/
De nada!
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
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.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯