How to use/add Single and Multiple Markers in Google Maps, Google Maps Platform in React.js, Next.js

Salam alikum how are you friends so in this  video I'm going to show how you can display   our Google Maps in the react application and  how you can display a marker single marker   and multiple markers in the Google Maps so  let's get started so I'm going to start from   the scratch open up the new window of the s code  open your the folder where you want to create your project I'm going to select this  demo folder I want my project here so let's create a project here I'm I'm going to name it Google Maps so it has started and here I can see  the folder Google Maps it is now creating   the project so this will take a couple of minutes  so I'm going to have to skip the video so here   we are our project is created successfully  and now we can see all those files here and   we are going to delete the unnecessary files  which are in the project because we don't need them yes move to recycle and  let's delete their import as well we don't need it and we also don't  need all of this stuff we simply want   a Dave and we want to print head  hello to see our application is working oh first we have to move to our Google our directory Google maaps Now npm start so our project is working fine and  you see it is working so now in order to   use the Google Maps you need U one package  npm re Google Maps API react Google Maps   API so go to this package copy it and stop  your server paste it install this package   and in the meanwhile let's come back and  you see they have already given us a code   which we can use to test the Google  Map so I'm going to copy all of this code and I'm going to paste it here and let's  run our server again let's run our app again let's see if our Google Map is working  or not so oops something went wrong so   what happened uh actually the problem is  that in order to use the Google Maps you   have you must have this Google API key and how  you can get it you have to go to Google Maps platform go to get started keys and credentials go to keys and credentials and continue at your country and then add a payment method and then  then you can create your Google Maps API key I   already have created my Google Maps API key which  is here so I'm not going to do that again and I'm   going to paste it here and see if our Google Maps  is working or not let's go back and I'm going to   refresh it so here we go our Google Map is working  perfectly fine and let's make it bigger we can   also change the styling of Google Maps here  let's make it 1,000 and let's make it Sol 550 so it is looking good now and next thing we want  to move on to is we don't want to show these   extra things on the map like this tummy for these  things so in order to hide them we got to go to options street view control we're going to set  it false and you see the dummy is gone and in   order to hide this map and satellite option we're  going to have to map type control we're going to   have to set this to false as well so you see this  is also gone so perfect so let's move to the next   part add the markers to our map so how we do that  we have to first import a marker from the Google   Maps API and we're going to use marker not just  marker we have to use marker f it is marker F now   so let's print our marker marker here m a marker  F and location pos position at position we want   to display a marker at the center Center let's see  what and here we go we have a marker right in the center you see it is working perfect  so now we want want to display multiple   markers and how we're going to do  that first we're going to have to   create an array which will contain  these latitude and longitudes for   our markers so let's constant points is  equal to array and let's copy this contr C and we want multiple of them let's say we want  four maybe let's so let's try that uh points DOT map p p i n Point comma index and let's place our marker inside of this and first we were displaying the center  now we want to display this point this index   of array which will contain the position so  it's just playing displaying one point right   here but it's not one point these are four  points they're just placed right one over   the other why because all of these points are  same that's why all the points are displaying   at the same point so we have to make sure that  they are different so let's change this to three   and let's change this to four and let's change  this to six let's see what happens oh you see   there just in a line and let's change here it is  three let's make it two three 4 and five see now   they are all over the places so that's it that's  how we can display multiple markers on the map

Channel: Marhaba Codes

Views: 2,682

Keywords: Marhaba Codes, React.js, Next.js, react-google-maps/api, google-maps-platform, google maps in react, markers, single marker, multiple markers, google maps api key, javascript, typescript, custom markers, Google Maps API integration, React.js Google Maps tutorial, Next.js with Google Maps, Adding markers in Google Maps using React, Dynamic markers in Google Maps React, Google Maps API key setup, Places API in React Google Maps

Id: XPTQxLHh9Gs

Length: 10min 18sec (618 seconds)

Published: Wed Jan 24 2024