How to load Maps JavaScript API in React (2023)

[@GoogleMapsPlatform]

🙋 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

[@zlackbiro]

Is this library free to use? If not, where to find pricing list?

[@akshatjain9281]

does it work with latest react? because i am having the peer dependency issue

[@BoyaniOmbogo]

Thank you ! Very nice and simple explanation.

[@capmajo334]

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.

[@cpn1011]

can i ask you how? i have the issues you told.

[@capmajo334]

@@cpn1011 instead of using the property zoom={9} use defaultZoom={9}, same goes for center

[@cpn1011]

Thank you:) eventually i solved the issue from your saying.

[@floydizzle]

@@cpn1011 For anyone else trying to figure this out, you need to replace the zoom and center props with defaultZoom and defaultCenter!

[@Daniel-nb3kk]

thanks

[@jpkeys6000]

Thank you Leigh!

[@frontend_ko]

okay, thanks for nice tutorial and helpful comments

[@GatoNordico]

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 🙏🏻

[@hussamshannan6604]

This is very helpful ♥️thank you 🙏🏾

[@LatinoWebStudio]

Do you know how to display the Google Reviews from my Google Business Profile?

[@334gabriel]

How did you create that theme?

[@zkcll5574]

Are those '&&' in line 28 at last moment?

[@justin9494]

How do I integrate places autocomplete with this?

[@nathanvanzandt9265]

Is there a way to make the map responsive to screen height or width changes? I tried width: 100% and it does not work

[@paulopma]

The npm page says it's still in alpha. Isn't it safe for production yet?

[@muhamadbayu4955]

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

[@qualion]

Anyone knows how to implement marker clustering with this new library?

[@GoogleMapsPlatform]

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

[@tengineer1453]

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

[@JonnyOrtiz-wu8ii]

Unable to pan the map left, right, up or down

[@yungrut6553]

defaultCenter and defaultZoom not center and zoom

[@ecpefkeh5986]

can you make more videos for this library please

[@shinpaingmin603]

Is it totoally free? Do I need to give credit card information?

[@GoogleMapsPlatform]

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

[@VinayTandale]

Please correct the video by changing the Map props from zoom and center to Default zoom and defaultcenter

[@juani_gauna]

i couldn't find the library what you use for the ApiProvider component

[@GoogleMapsPlatform]

It comes from the line that imports the @vis.gl/react-google-maps library: import { APIProvider } from "@vis.gl/react-google-maps";

[@paulopma]

Do you have some example using Pegman (the yellow man for street view hahaha)?

[@phongngo315]

Hello. I'm using const places = useMapsLibrary("places") to implement autocomplete. But it doesn't work, the variable places always null. please help me

[@marouaguentiti8328]

How can I just display the map of a specific country?

[@SamBattis]

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.

[@No-zk5xn]

what should be the type of map id in the typescript ? the key is output to the console, and id undefined

[@No-zk5xn]

error in console The map is initialized without a valid Map ID, which will prevent use of Advanced Markers.

[@No-zk5xn]

when i use type string

[@juju_be]

instead of zoom and center, use defaultZoom and defaultCenter. Otherwise you cant zoom or drag around the map.

[@alexanderhamming5139]

[@dannyisrael]

doesn’t this make the google maps api key public?

[@leighhalliday]

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.

[@GoogleMapsPlatform]

Here's a video on restricting your API key: kzbin.info/www/bejne/aJCri4KYi8eYY8ksi=J9HCo0znWLhW3WST&t=87 and detailed recommendations at developers.google.com/maps/api-security-best-practices

[@siobe0]

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.

[@GoogleMapsPlatform]

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

[@Veera8124_]

can i only show the africa map using javascript and react.

[@franckf6692]

Why react and not angular?

[@myWorldDiscover]

zooming by mouse not working!

[@GeniusBrilliant]

is it an official google team channel and library? or just a channel who really good pretend to be?

[@UmutBektaş-p7n]

Doesn't it support mobile? The map looks very bad on mobile.

[@godriceeichie]

I'm I the only that could not install the package because of the splitting error showing on the terminal

[@ene_andre]

you'll be able to install it just fine in your command prompt not via vs code terminal

[@godriceeichie]

@@ene_andre okay thanks

[@Vandana_pawar]

@@ene_andre but it doesnt shows their files in vscode

[@ene_andre]

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

[@JonnyOrtiz-wu8ii]

Zoom doesn't work, map won't zoom in or out

[@JonnyOrtiz-wu8ii]

nevermind, just fixed this by changing zoom props to defaultZoom

[@rubiadias7677]

Gracias o/

[@leighhalliday]

De nada!

[@Daniel_Ben_Avraham]

>works at google >not using chromebook bro failed the vibecheck

[@md.abuhanifa9843]

❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💛💛💛💛💛💛💛💛💛💛💛💛💛🤲💯💯Thanks a Lot my honourable lovely all of my Soulful & faithful friends. Again,Thank you.❤️❤️💚💚🇧🇩🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲🤲💯