Lesson 8 : Next JS/ Google Maps API Integration (part 1) | Mastering Google Maps API in Next.js

all right it's time to integrate the Google Maps API into our next JS application to get started we need to install the react Google Maps API package let's begin by searching for npm react Google maps on Google so we are looking for this react Google Maps API 1 but before we install it let's take a moment to explore the documentation reading the docs is always a good practice here's the link to the official documentation unfortunately it seems the official documentation link isn't working for some reason however fear not I found an alternative link that essentially mirrors the content of the official documentation you can find it in the web archives I will provide you with the link to this unofficial version of the documentation so when you combine this documentation with the vanilla JavaScript documentation you'll discover that you have the power to accomplish virtually anything with the Google Maps API in both react and nextjs applications now let's proceed with the installation of this package copy the provided command and paste it into your command prompt once that's done return to the npm page to understand how to use this package effectively before we dive into the details let's remind ourselves of the primary goal of this application it's straightforward users will submit trip requests and we'll connect them with the nearest available drivers to achieve this let's create a specific route called request that will display the map to begin create a new folder within the app directory and name it request as usual we'll also need to craft a new page inside that folder and we'll name it page.js open the request page and initiate it with RFC this is the place where we'll integrate the map now let's proceed with making the necessary import fortunately there's just one import to include so go ahead and copy this line and paste it into your code for a clearer understanding of what's happening let's head back to the package page and take a closer look at the content in fact let's copy everything from there and paste it into our page.js file we'll do this to ensure that we have the complete code before breaking it down good now let's go to the browser and visit Local Host 3000 SL request we are having an error we can fix this just by turning this into a client component so let's go ahead and put the use client here at the very top keep in mind that we'll refine this component in detail later on now let's check for any issues oh it seems like there's an error let's take a quick look at the console uh it's the API key missing let me quickly copy the key and paste it here awesome as you can see the map is now up and running we're making progress of course what we're doing here is not considered best practice we should store this API key in a local environment file to achieve this let's create a file named. env. looc in the root folder of our application in this file Define a variable named next public Google Maps API key and set it equal to your Google Maps API key you can simply cut the key and paste it in this variable great now in your code you can access this key using process. env. next public Google Maps API key let's check the browser to ensure everything is working as expected amazing the map is still here and we've improved our security practices okay now let's break this down and dive deeper into understanding the components in this example first we have defined the container style for the map and set the center of the map both of which are stored in these constants let's make some changes here and observe the effects how about we modify the width to 100 % and increase the height to let's say 90 VH units as you can see these adjustments result in a larger map with more screen real estate good now let's tackle the map's Center the center is typically represented by a pair of latitude and longitude coordinates currently the map is centered somewhere in Brazil how however our project is based in London so we need to shift the focus there to do that we just need to find the precise coordinates that correspond to London one way to obtain these coordinates is by using vanilla Google Maps in your web browser open Google Maps and search for the center of London this will help us accurately pinpoint the coordinates obtaining the pair of latitude and longitude is quite straightforward simply right click on the map and there you have it these two numbers represent the latitude and longitude of the location where you performed the right click click on it and it will be automatically copied to your clipboard now let's return to VSS code and make the necessary Replacements you can paste the coordinates we just obtained right at the top of your code the first value 51 something will be the latitude and the second one will be the longitude now let's head back to our map as you can see we've successfully centered the map on London let's consider adjusting the zoom level the zoom level determines how closely the map is displayed a larger number results in a more zoomed in map how about we try setting it to 12 or 13 for a more detailed view all right with that covered let's move on

Channel: Abdel Diouf

Views: 3,432

Keywords:

Id: YfObrRL3gfk

Length: 7min 48sec (468 seconds)

Published: Sun Nov 19 2023