NextJS / ReactJS Google API - Add Google Maps to your Next JS application - Easy way

do you want to learn how to integrate Google Maps inside your custom reactjs component you're in luck that's exactly what I am going to teach you in this tutorial and this is the final result that you can reuse in other projects just by doing a tiny modification to the code of course that all of the US ual functionalities are in place and work such as satellite view if you click the full screen view you can definitely zoom in or zoom out and you can also use the street view you get my point here I don't know if you can tell or not but this location is very popular in Portugal but you can do the same for any location in the world of course all you have to do is to get the GPS coordinates for that place that you want to display on the map but if you don't know how to get the places coordinates just use the timestamps below in this video's description to learn about that but for this tutorial I will provide these GPS coordinates in case you want to test this yourself so let's do this as you can see I am inside an empty folder and I'm about to start a new next project by running this Command right here so all I have to do is to press enter we are going to use typescript uh Aslin Tailwind CSS will be used for basic styling but I won't cover Tailwind CSS The Source will not be used and the app router of course will be used so I don't need to customize the default Imports time to install the two dependencies that we need to build this project so I'm going to type npm I and I'm going to copy paste the packages name so I make sure that I do not mess up that's the first one actually and the second one actually relates to the types okay press enter and let's wait until this finishes Next Step you need to go to this website of course because we will need the API key so the service actually works I already have an account and my API key ready but you need to sign up and get your own API key so just go through the sign up process and search for look for maps data sets API and you will get to what you need disclaimer this is a paid service but you can set up a free account and use the free trial period to test the API in your project that's exactly what I did okay so you don't really have to spend any money unless you want to continue using this okay so the registration process is straightforward you click get started register an account now and come back to this video once you have your own API key I will be waiting for you right here great you're back hopefully you have your own API key already because you will need it for the env. loal file that we are about to create so let's do that in the root level we need to create the file so env. local okay and then we can create our variable and I'm just going to copy paste the format for you to follow so this is going to be the Google Maps API key and you need to stick with this format okay to make sure this works and of course you need to replace this with your actual API key before running our uh development server and creating our custom Google Maps component let's just do the usual file cleanup so so inside up you will find the global. CSS and as usual we can get rid of everything excluding the Tailwind rules at the top and then you can navigate to our homepage and get rid of the main whatever it's inside the main and you can just replace that with a H1 tag that only says oh and you can also delete this import that is not going to be needed now we can run our development server so super easy npm run Dev boom there you have it our application is running under Local Host 31 for me okay so it is time to create the custom component the Google Maps custom component and call it inside the Ownage so let's do that so inside app we're going to create the usual components folder component on folder inside that folder we are going to create the Google maps. TSX because we are using typescript of course and we can use the shortcut to create our basic structure for the component this is all good so now we can import this created component inside our home so we can import Google uh Maps Okay and we can return an empty react fragment instead of home and then we can render our Google Maps custom component inside this is all good okay and as you can see it changed to Google Maps because that's what we have here so now we can close this file file and we are going to work inside this Google M Google Maps custom component so I'm going to just change the view to word drop so you see everything that I'm doing okay let's build this so as you remember we installed a package Google Maps Okay package so we need to use that um package we need to grab the loader from that package and we also need to use use effect react hook which means the first thing that we actually need to do so we don't forget is to change this into uh uh client side components by typing use client string right at the top and then I can also not an array sorry an object I can also uh grab my use effect hook that I I'm going to need okay So Below I'm going to import my loader which is going to be necessary and I'm going to do that from the Google Maps JS API loader so this is what I need so Maps as you for sure know work with latitudes and longitudes okay so we need to pass those values okay um now inside our custom component the first thing that I actually want to do is to define a map ref variable and you can read about this use ref uh in the documentation but I'm just going to type this out so map ref okay because we we will need this and this is going to be a react use uh ref react use ref okay and we're going to set this to null to start with okay so all good so this use ref it's a react hook that let us reference a value that is not needed for rendering and what I just said is actually written in the documentation okay so now we need to uh use the use effect in order to initialize our Google Map so that's what we need to do right now I went ahead and of course created a basic uh use effect hook syntax and inside this use effect is where we're going to do all of the logic okay and because this is going to require communication with a server we will also need to use async and a weight so the first thing that I want to do is to in initialize my map okay for that I'm going to create a const I'm going to call it initialize initialize map and this is going to equal async there we go and I'm just writing the basic Syntax for this okay in here I'm going to create a const for my loader okay and we have imported the loader at the top so const loader equals a new uh loader okay and this takes in an object okay inside this object uh we need to pass the API key and you should have yours by now so for that I'm going to actually process dot uh EnV Dot and now the variable name which was next public and make sure to use this syntax otherwise I think it will not work Maps uh API key okay and a comma and we need to pass the version which which means uh which relates to the updates how often these updates are done I'm I'm going to go with quartly I think that's one option you can explore more options by Hing on this um property as you can see weekly is also an option or you can check the docks okay now we have a problem API key and this relates to the types so I need to Define it as a string and this should take care of that error hopefully it does and it does cool so this is good we can now continue so below here uh I can in fact start my map uh const so I'm going to do const I'm going to bring the map I'm going to destructure the map and this requires a weight because we are using a sync and I'm going to access my l do import library and you can import a lot of things but now I'm going to just go with maps okay and if we just over on here and actually press um we can see that we can uh actually import a lot of things and we will be doing that for the marker later in this tutorial okay so just to mention that okay next we need to uh pass in the location details the latitude and the longitude for this location in the map okay and I have this specific place as I showed you in this project intro so I'm just going to copy paste this to be faster and of course you cannot mess up with this otherwise things will break okay okay I have now my my latitude and my longitude okay and notice how these are written okay uh so now we can move on and create our map options okay and so I do not forget I'm actually also leave a comment here for the marker that we will later on ADD as mention it okay so but now I want to create a const for my um Google Maps options so const options which is going to be the type of Google do maps. map uh map options I believe map options I think this is it and this is going to be an object and inside I'm going to pass some information okay what information is this um where I want to Center the map and I want to Center the map in this specific location okay so I'm going to define the center and then pass this value because I want this to be centered in my map if that makes sense and I can also add the zoom and the zoom level I'm going to go with I don't know if 15 and most uh road map imagery is available from Zoom levels 0 to 18 so you can play with these numbers and customize it to your own needs and finally the last option that we need to pass it's our map ID which is actually a string and I'm going to call this nextcore mscore toots whatever okay now that we have this um we actually need to feed our map with this map reference so the next thing that I want to do oh and I'm already forgetting two things so this use effect I want to pass the dependency array so the empty array and so I do not forget otherwise this will not work I actually actually need to call this function so let me just initialize this function call this function so this actually works so this should be all good so continuing what I want to do now is to create the map with the help of the this hook the use ref react hook so I can now still inside the use effect okay I can now Define my const map okay oops not like that what the heck am I doing const map equals to what equals to a new map and this is uh uh we need to pass more information okay so we we need to pass map do uh ref. current okay and we need to pass our options these options that we select that we defined right here and there's like T okay typescript of course so we need to pass this as a HTML uh div element I think this is it and we need to pass that inside if I'm not wrong in here I believe all I have to do is this oops there we go did this work okay okay I I added an extra dot here which I don't need okay cool yeah so I'm passing that looks good to me so I now have that and yeah we might have something I think we can now start to build the UI to display the map so we don't have anything yet okay but we should have because we don't have any UI but yeah let's create that UI and display that let's start with the styling part I'm going to give this map a custom height of 600 pixels you can give it a screen he screen utility class whatever you want it's up to you and I need to pass the ref oh what the heck am I doing not there sorry I need to pass the ref and this ref it's going to be my map ref this one okay and if I now refresh hopefully we'll see a map on the screen and we do see it great so this is working and we already have just like that we already have pretty much all the functionalities so we have the satellite view if I click yeah it works back to the map the full screen now my Escape so uh zoom in zoom out street view yeah this is all working and we didn't do this pretty much this is kind of included so now all we want to do is actually to add the marker here in this place because we are marking this place NE so let's work on that I believe we already created a commment there we go we created this this comment for the marker for us to be able to use the marker we need to import another Library so I'm going to Define another const so this is going to be the marker and this is equal to um a weit loader yeah grabbing the loader one more time do import Library okay and this time we want to import the marker okay and we need to do that as uh Google Maps marker otherwise it's going to complain so Google uh do maps. Marker uh marker library library all I think this is all we need this should be good in terms of this import so let's see let's continue so the marker import is done so it's time for us to actually add the marker in the map so I can go here and I can add a comment so add the marker in the map so I need to Define another const marker and this will be equal to a new uh marker of course which takes an object and we need to past information so the map is going to be our map yeah of course there we go the map is going to be our map and and we also need to pass this position so position and we have defined our position which is location in map so we need to pass that as well and this should if we refresh there we go now we have the marker so this is definitely done and this is definitely working so everything still works amazing super cool super fast and because this is react at the end of the day under the hood so this means that this component can be reused by just changing the UI a tiny bit in case you want to do so and of course you need to pass different coordinates and then you can reuse this code in other projects and this is the beauty of react so now the question is we need to Fed our component with these coordinates but how do you get the coordinates from a specific Place let's assume that you wanted to display the London Eye in your website in your uh web application so how can you get this coordinates in case you don't know it's super simple you just pick whatever location that you want and you just right click and there you go you have the coordinates right here okay or you of course you can definitely go somewhere else maybe you want to display Soho coordinates I don't know and then you can just right click and you get the coordinates for Soho in United Kingdom London hopefully you enjoyed this tutorial so if this was helpful to you do not forget to share to like and to subscribe to my channel I'll see you on the next tutorial

Channel: The JavaScript Way

Views: 4,867

Keywords: reactjs google maps, nextjs google maps, google maps api key, google maps api tutorial

Id: 2xI2RKC4niY

Length: 24min 0sec (1440 seconds)

Published: Fri Jan 19 2024