How to load Maps JavaScript API in React (2023)

Chapters:
0:00 - Intro
0:32 - Installing the API
2:39 - Setting up a map ID
3:14 - Adding markers
4:18 - Adding info windows to markers
6:02 - Wrap up

Links:

#GoogleMapsPlatform #Geocasts

[GoogleMapsPlatform]

🙋 Do you have any questions about React or the API?

[johnchen]

use defaultZoom and defaultCenter so you can drag and zoom instead of zoom and center props

[rqkyoiz]

Thank you ! Very nice and simple explanation.

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

[frontend_ko]

okay, thanks for nice tutorial and helpful comments

[akshatjain]

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

[capmajo]

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.

[tengineer]

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

[nathanvanzandt]

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

[muhamadbayu]

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

[juju_be]

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

[phongngo]

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

[siobe]

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.

[JonnyOrtiz-wuii]

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

[SamBattis]

How can you load the broader Google Maps Javascript API in React so outside of <APIProvider> tags, features such as google.maps. elements can be used? I have not been able to find any documentation for this.

[marouaguentiti]

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

[VinayTandale]

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

[paulopma]

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

[justin]

How do I integrate places autocomplete with this?

[ecpefkeh]

can you make more videos for this library please