How to load Maps JavaScript API in React (2023)

[Music] hi I'm Lee Halliday and today we're going to get up and running with react Google Maps in about 5 minutes using this new package that's part of is gl's framework Suite this is the page we're working with it just says react Google Maps right now eventually this will be replac with a beautiful map first we'll install the library with npm install at v.g react gooogle maps and this is the code we're looking at now there is some stuff here already and we'll talk about that sort of as we get to it in the demo the important thing is this right now it's returning a div that says react Google Maps we need to wrap the API provider around that sort of at your top level that goes around anything to do with maps and pins and markers and all of that and we need to pass a prop to it of the API key I have M stored it in an environment variable so I can access it with process. n. next public Google Maps API key so you should store yours sort of wherever you store your environment variables and if we do that come back we've got a big error so it says create context only works in client components add the use client directive at the top of the file so I have that commented out so I just need to uncomment this and that's because um nextjs supports server rendering but the code word writing only works in the browser and the client so if we do that well we're not rendering a map yet but we're seeing what's inside of the API provider so let's start to work with a map and we're actually going to put it inside of this div so we'll put map uh like this and we need to pass a couple props for the map to work the first is the zoom level so we'll just set this to nine and the other one is where to sort of Center itself so we need to pass Center and I've got this variable here and it's hardcoded to Hamburg I believe so we'll put in this position come back and we have a blank page so there's a reason I have this div here we're putting the map inside of a container this div and by default divs don't have any height so we need to style the div to give it some height and we'll have it take up Hunter VH um which is the whole page so we've got this up and running it's now showing a beautiful map and if we wanted to we could set the width although you can see that that's not required but if you wanted to sort of control the size of your map should still work fine like that great so the next thing we're going to do is because we're using Advanced markers we need to set up a map ID so inside of the Google Maps platform and map management you can access and create maps with map IDs and you can style them so this code here I already have in an environment variable so I will just access it so we'll say map ID and that is process. env. next public map ID and as soon as I do that I get the map styling that I've already set up so now I have a a dark mode map with our map we want to add a a marker to it so I'm using Advanced markers and you remember you need the map ID for that but that allows you to customize really what the marker looks like you can set up images you can do HTML or you can use the pin component from the react Google Maps package so we'll set up the advanced marker we need to tell it where to position itself so we'll put it in the middle of Hamburg again and now we have a marker so if we wanted to change what that looks like we can use pin and it will be a self-closing component and we can pass some things like uh background color and this will just sort of be random colors I set we'll say gray and we're going to do border color we'll do green and then the glyph color that's sort of the center little circle we'll say that's purple so this may be a weird looking pin but there we go so you can make it look like whatever you want we've got green gray and purple in ours and we want when you click it to open an info window so for that we're going to need to capture some state so we'll call this whether the info windows open and the set open and that will be used State and it will be false by default so when do you trigger that you trigger that when you click the marker so we'll say onclick and when that happens we will call set open and say it's true great so now we can use that variable open to say when it's true we're going to render out an info window we also need to tell the info window where to position itself so we're going to set this same Hamburg location uh there's a way to tie the position of the marker to the info window by anchoring them together and there's documentation on the packages website on how to do that but we're just going to set the position which is also a way you can do that so inside of here you can put HTML and we'll say I'm in Hamburg just like that so if I refresh the page click this I should see my I'm in Hamburg great if I close it and reopen it it doesn't work so this is a common sort of issue that we need to get over but it's pretty easy so the problem is the X in the info window isn't tied to our state so we just need to do that and this package provides us a prop or an event where we can do that on close click so we'll when that happens we'll say set open to false like this so now I can can open it close it reopen it reclose it and we've gotten up and running using react Google Maps inside of um an xjs app but it can be sort of an any sort of react app and we've rendered out a map using a map ID to style it we've added an advanced marker that opens and closes an info window

Channel: Google Maps Platform

Views: 33,094

Keywords: react, react maps, react google maps, react maps javascript api, react maps js api, react maps js, add a map in react, map in react app, Google Maps Platform, Leigh Halliday, OpenJS Foundation, geospatial visualization framework, open source, maps markers, get a map id, set up google maps, maps for websites, maps for apps, React, vis.gl

Id: PfZ4oLftItk

Length: 6min 30sec (390 seconds)

Published: Thu Nov 02 2023