IN 15 MINUTES! Add Google Maps to NextJS

all right so what's going on guys uh in this tutorial we're going to learn how to integrate Google Maps into your re uh nextjs project um so this is part of a tutorial that I'm working on it's going to be published of course uh and it's a very exciting project I'm going to talk about the details in the end so so let's get started so so what do you do um well the first thing you do is you're going to come here and then you're going to type Google Maps API like so and then you're going to go on the platform and sign up and then get the API key uh if you you can follow the instructions pretty straightforward and once you have done that then you're going to come to your next CHS project and you're going to do a couple of setup things so the first thing we do is install some npm packages so what you you do is install this npm package Google Maps sljs API loader I have this version uh the other thing you want to install is this types for Google Maps I don't know if it installed automatically but if it doesn't then just go ahead install it so once youve done this uh then you're going to come over to your n.l file you're going to get the API key and you're going to plug that here now one thing to remember is want to add this nextore public because if you if you know how uh nextjs work is you have a client and a server uh component so we want to use this on the client side so if we do this without the public uh this next public we will not be able to access the API key so it's very important that you add this to the the nextore public your API key token all right so now I'm going to close that then so I have the project organized and um as I said this is part of a another the project I'm working on which I'll be releasing in a coming uh weeks uh which I'll talk about more in detail what's going on but for now so I have a components folder and within the components folder I have a map. TSX so by the way I'm using typescript that's what you're seeing TSX right so to get started what I have is just a react component a map and then here I have is Google Maps so what we can do is use this all right so I'm going to come to the main page and we will see map like so and it looks like we have a problem let's see why it's not bringing it up map all right here we go sometimes it just got to pick the right component from the right path all right so we have a map and it looks like it's missing the following lat long so that's because well you know what I'm going to remove this so we can start from the start all right so um I was using we're using this in a dialogue all right so I have this uh map component that I'm using and what we can do is kind of put things side by side and we can see this action in action all right so here we have the two side by side and why is it not showing because I haven't saved it yet okay here we go so Google Maps is showing up so let's get in and try to um I guess work on this okay so what we need to do is initialize the map and um but before we do that the way it works is Google Maps you need to give it a some sort of a div basically that the map can render itself into so way we can do this we're going to start and we're going to create a ref so I'm going to call it a ref and it's going to be a react use ref right like so and then we can set it to null uh like so all right so then what we need is we need to initialize the map and you know the best thing since it's like a side effect so the best place would be to use a use effect and I will come here and initialize my depths array like so all right so now that I'm here um so what I can do is initialize a function and I can say init map and it's going to be an async function which we will see why because uh when you initialize the map there's some functions when we import the library they are asynchronous cuz we get a promise and right away I'm going to call this function all right so let's just do uh console log and we're going to say map in it I'm going to save it so nothing happens if we go to the inspect tab we should see map inage so now you see how this coming in the browser that's because we're using a use client and you want use client because it's a use effect we're using um basically state so you want to use that all right so now that that's out of the way we're going to continue with this so what you need is first of all you need a loader right and that's where you specify the API key and the version so what I'm going to do is I'm going to say loader is equal to let me close that all right so I'm going to say loader is equal to new loader right and it's coming from I think it's not bringing it up we need to bring it from Google Maps and right so I'm going to just leave it like this so what we can do is we can say import and I can say loader from and add Google Maps J blah blah blah API loader all like so there we go and as you can see we need some argument so it takes an object and what you want to give it is the API key so this will be the process. env. now remember the uh we created that API key so we can say next public undor Maps API key API underscore key like so and then we want to do a version so the version is how often the app should be updated so is it weekly quarterly whatever so I'm just going to do um weekly like so now here's a thing because we're using typescript I like typescript because it makes the code a little bit more safe so it's saying like uh what's the type of this so we can say you can either do this the bang or I think you can also just do this string what should work all right so now we have when we have the loader uh now we need to get a our map all right so what we do is we say const map const and I can say map all right so where does the map come from we can say loader do import Library that's how you import the different libraries we're going to import another one you see but as you can see there were like a couple so that's the map now if you see import Library returns a if I go it returns a promise right so what you do when you have a promise well you a wait on it and that's why we use that async okay so now I have a map and then the other thing I want to bring is well okay let's leave that for now we'll get to that when we do a little bit of advanced stuff all right so now I that I have the map then what I want to do is I want to construct a position so I'm going to say position and this is where like you want to Center the map on and what does the position come from so for now I'm going to just hardcode something and then we can use that all right so I punched in the coordinates of uh CN Tower a a tourist location in Toronto so we're going to zoom in on that so now that we have the application then what do we need well after this we need the map options all right and the way you do this is we say map options okay is equal to Google do maps. map options whoa options like so so that's the type that's the type actually of this uh map options so then well what are the options so we say Center the map on the position now you want to specify a zoom level let's go with 17 and you want to give it a map ID so we're just going to say um my nextjs map ID you definitely want to generate something okay so we have a okay so we have uh property l oh they call it actually LNG sorry my bad all right so they call it LNG um so we use that so now what we do is we're going to set up the map we're going to say set up the map all right so the way you do this is we're going to do const map is equal to new map all right so that's remember the object we got and this is where you start punching in the stuff so what do you want to there you see how they're saying the HTML element well so we already have that and we have map ra. current so that's our HTML element and then we give it the map options now it's complaining it's saying that um argument of type null is not all right so that's because remember we did the map ra and it's null so and this thing takes uh HTML div element so we need to do some uh casting here or casting here so I'll say HTML div element div element like so and then over here you want to do the same thing HTML div element like so and that takes care of that okay cool all right so what do we do uh after that well you can just uh basically um once you do this actually the map is ready um you should be able to see the map okay so then over here I think we can start to show it and let's see if it actually works all right so I'm going to do div and let's give it some style us style height and let's do 600 pixel okay and ref is that map ref who okay map map I can smell I [Music] swear okay let's save it and let's see if I refresh this oh beautiful there you go so as you can see we're Center on C Tower and that worked pretty good now what if I want to put a marker on this right that'll be cool to have a marker on this so what we can do is we can come over here to where we do this and we can say in init a marker right so I can do const and we'll say marker and same kind of deal await loader. import library and we can say marker all right and what is the marker like uh it's a Google Maps that's the type marker marker Library like that all right so now I have that and we're going to go back to the start all right so what do we do with the marker well we need to put it on the map but how do we do that so you have to tell the you see how we got the this map object we need to tell the marker where should it um display itself all right so the way you do this is after you have the map then we can say um put up a marker all right so what I can do I can say const marker is equal to new marker all right and you want to associate that with a map so that's the map we got and where do you want to put it well the position is that position right and let's see if this will actually work I'm going to save it and I think I need to refresh there you go you got your marker how amazing is this all right so I guess um I hope that really helped you guys how to how to um integrate Google Maps in your next day project now I'm going to show you how I have done it in the kind of intermediate app that I'm still in the process of making the video so let me show you guys that really quick all right so this is the project that I'm currently working on and I'm be releasing it to you know to you guys for free definitely and all I'm asking is subscribe like share um because it's going to be a really really cool project you guys are going to learn mobile app development back end front end pretty much the everything Google Maps Firebase and what else uh mongod DB I think it's it's got some intense material so anyway so the way I'm using the map in this one is see we have a detail View and you can see see I am I have a card actually and we're going to be adding stuff to this card but as you can also see I am uh I have a custom pin so uh it's like a it's a flag and do you see the animation when I click on it so if I do detail see how it kind of drops so we're going to be doing that kind of animation on it and um it's going to be cool it's going to be an IOS app and it's going to be tied to this uh it's a real world app by the way a very practical app so I hope you guys are excited for this this was just a very very short uh very short uh sneak preview and please like And subscribe stay tuned and it's going to be released in the coming weeks by now

Channel: Grepsoft

Views: 18,319

Keywords: google maps api, nextjs, maps api integration, grepsoft, learn nextjs, nextjs tutorial, react, npm, google maps marker, locationbasedapp

Id: LgTan_NZnAg

Length: 15min 45sec (945 seconds)

Published: Fri Oct 06 2023