How to load Maps JavaScript API in React (2023)

Поділитися
Вставка
  • Опубліковано 10 гру 2024

КОМЕНТАРІ • 68

  • @GoogleMapsPlatform
    @GoogleMapsPlatform  Рік тому +7

    🙋 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
      @zlackbiro Рік тому

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

  • @BoyaniOmbogo
    @BoyaniOmbogo 10 місяців тому +2

    Thank you ! Very nice and simple explanation.

  • @akshatjain9281
    @akshatjain9281 9 місяців тому +8

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

  • @jpkeys6000
    @jpkeys6000 2 місяці тому

    Thank you Leigh!

  • @GatoNordico
    @GatoNordico Рік тому +1

    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
    @frontend_ko 9 місяців тому +1

    okay, thanks for nice tutorial and helpful comments

  • @hussamshannan6604
    @hussamshannan6604 5 місяців тому

    This is very helpful ♥️thank you 🙏🏾

  • @capmajo334
    @capmajo334 8 місяців тому +11

    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
      @cpn1011 8 місяців тому +1

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

    • @capmajo334
      @capmajo334 8 місяців тому

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

    • @cpn1011
      @cpn1011 8 місяців тому +1

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

    • @floydizzle
      @floydizzle 2 місяці тому

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

    • @Daniel-nb3kk
      @Daniel-nb3kk 15 днів тому

      thanks

  • @juju_be
    @juju_be 4 місяці тому +1

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

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

  • @ecpefkeh5986
    @ecpefkeh5986 Рік тому

    can you make more videos for this library please

  • @tengineer1453
    @tengineer1453 5 місяців тому

    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

  • @SamBattis
    @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.

  • @muhamadbayu4955
    @muhamadbayu4955 9 місяців тому

    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

  • @334gabriel
    @334gabriel 7 місяців тому

    How did you create that theme?

  • @nathanvanzandt9265
    @nathanvanzandt9265 5 місяців тому

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

  • @phongngo315
    @phongngo315 8 місяців тому

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

  • @justin9494
    @justin9494 9 місяців тому

    How do I integrate places autocomplete with this?

  • @paulopma
    @paulopma 11 місяців тому

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

  • @zkcll5574
    @zkcll5574 Рік тому

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

  • @qualion
    @qualion Рік тому

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

    • @GoogleMapsPlatform
      @GoogleMapsPlatform  Рік тому +1

      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

  • @juani_gauna
    @juani_gauna Рік тому

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

    • @GoogleMapsPlatform
      @GoogleMapsPlatform  Рік тому

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

  • @marouaguentiti8328
    @marouaguentiti8328 7 місяців тому

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

  • @shinpaingmin603
    @shinpaingmin603 Рік тому +1

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

    • @GoogleMapsPlatform
      @GoogleMapsPlatform  Рік тому +1

      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

  • @JonnyOrtiz-wu8ii
    @JonnyOrtiz-wu8ii 10 місяців тому +2

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

    • @yungrut6553
      @yungrut6553 7 місяців тому

      defaultCenter and defaultZoom not center and zoom

  • @VinayTandale
    @VinayTandale 7 місяців тому

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

  • @paulopma
    @paulopma 11 місяців тому

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

  • @No-zk5xn
    @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
      @No-zk5xn Рік тому

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

    • @No-zk5xn
      @No-zk5xn Рік тому

      when i use type string

  • @Veera8124_
    @Veera8124_ Рік тому

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

  • @dannyisrael
    @dannyisrael Рік тому +1

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

    • @leighhalliday
      @leighhalliday Рік тому +2

      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
      @GoogleMapsPlatform  Рік тому +1

      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

  • @GeniusBrilliant
    @GeniusBrilliant 11 місяців тому

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

  • @franckf6692
    @franckf6692 3 місяці тому

    Why react and not angular?

  • @UmutBektaş-p7n
    @UmutBektaş-p7n Рік тому

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

  • @myWorldDiscover
    @myWorldDiscover 7 місяців тому

    zooming by mouse not working!

  • @JonnyOrtiz-wu8ii
    @JonnyOrtiz-wu8ii 10 місяців тому

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

    • @JonnyOrtiz-wu8ii
      @JonnyOrtiz-wu8ii 10 місяців тому +1

      nevermind, just fixed this by changing zoom props to defaultZoom

  • @godriceeichie
    @godriceeichie 10 місяців тому

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

    • @ene_andre
      @ene_andre 10 місяців тому +1

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

    • @godriceeichie
      @godriceeichie 10 місяців тому

      @@ene_andre okay thanks

    • @Vandana_pawar
      @Vandana_pawar 5 місяців тому

      @@ene_andre but it doesnt shows their files in vscode

    • @ene_andre
      @ene_andre 5 місяців тому

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

  • @rubiadias7677
    @rubiadias7677 Рік тому

    Gracias o/

  • @doomerdaniel
    @doomerdaniel 16 днів тому

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

  • @md.abuhanifa9843
    @md.abuhanifa9843 10 місяців тому

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