Build a Stylish Custom Google Map With The Google Maps API

Howdy Folks and welcome back to the channel so in today's tutorial we're going to create a custom Google map with color theme some custom icons and we can allow the user to click on each icon to expand a little info window so we'll start from the very beginning from creating our API key to creating a bounce area where all of our icons will be centered in the map so without further Ado let's Jump Right In [Music] the first thing we want to do is go to our browser and type in cloud.google.com and then just click the go to console button then click the top drop down menu and from here we'll just click the new project link and then just give your project a name and Associate a billing account with it and optionally include a location and then click the create button and now we can select the project that we just created then click the button called apis and services and then to the left hand side you'll see a link called credentials at the very top of this page you'll see a plus create credentials link and then just select the top option called API key now we have our Google Map API key for use in our custom Google Map but there are a few things we need to do first so let's click into the API key that we just created now the API key I've just created is for the purpose of this tutorial so it will be deleted shortly but you should restrict the API key to one of the following your website and IP address an Android app or an IOS app what I've done on the live version of this on front end hero is restrict that to The Domain front-end hero.dev so if anybody else tries to use my API key and uses it on their website the application won't work okay I'm going to paste the API key into my HTML documents and leave it there for the moment and now we just need to enable the API key so pop into the section above titled enabled apis and services and then we click on the button to the right titled enable apis and services from here we click into the maps JavaScript API section and finally click enable and now we are finally ready to start coding up our Google Map so in our index.html file I'm just going to create some CSS to reset the margins and paddings of our page and center the map inside now I can create a div that will hold our map called Google hyphen map with our Google Map div set up and centered in the page now we can link up the Google Maps script and our main.js script we'll start off by creating a script hike at defer and then the SRC will be maps.googleapis.com forward slash Maps forward slash API forward slash JS query key equals error API key and then we just need to add in at the very end a callback so we'll say and callback equals function and our function is going to be called init map and then we can link up our main.js file with all of that admin out of the way we can now create some JavaScript code the Callback value we gave is called init map so now we're just going to create that function now and this function will hold all of our functionality and styles first up we'll declare a variable called map which will create a new Google Maps object and place it into our Google Map div ided by a variable called map options the map options variable will be an object and will hold our default zoom level and Center our map so I've got to create some properties now for this object the first is Center which I'll declare in a moment then I'll create a zoom property and give it a value of 10. now I'm going to declare the center map variable this will Center our map on a specific longitude and latitude value the places I'm going to be creating on this map will be based in London so I'm going to type in London UK and then get the coordinates I'm simply going to go to the address bar and we'll copy the longitude and latitude values now I can paste these into my Center map object prefixing both values with an lat name and an Ln G name a quick save and we can see the map displaying just fine now although we may need to tweak the coordinates a little bit because the center of the map is a little bit off okay let's tweak that now by dragging the map more to the left okay that looks pretty good now the map is centered on London and next I'm going to remove the default UI buttons so I'll change the disable default UI to true now we can create a markers array with some location objects the objects will contain latitude and longitude the name and the address and from this point I'm going to pop back into Google Maps and search for five of my favorite bakeries in London to choose for these markers the first one up is crumbs and doilies I'm first going to get the GPS coordinates from this location by right-clicking the red icon on the Google Map and copying the latitude and longitude then I can simply paste these into the lat and long properties and then pop in the name crumbs and doilies and then finally add the address and then all that's left here is to copy the address and I'm just going to tweak the address slightly by removing the place and adding some line breaks and it looks like I forgot to include the object brackets so I'll pop these in now and now I'll just do the same for the four other bakeries and copy and paste these guys in [Music] [Music] so with all of our marker locations created let's display the first one to see that it's actually working so under our map object we're going to create a new object called marker and we're going to pull in the longitude and latitude of the first marker as a Razer zero index based we're going to say markers zero and then give it the property of lats and then long and then we just need to include our Google Map value for the map property a quick save and we can see that the first Bakery location is displaying now I'm going to alter the code we used to create our Force marker to Loop through all of our locations a quick save and we can now see that all of our bakeries are displaying on our map great stuff and instead of showing the default Google red pin let's add in a custom icon so I've already got one handy here from my website and I'm just going to copy the URL and declare a variable to hold this value then we can just pop down to our for Loop add a new property called icon and include our new variable then when we refresh the page all of the default markers have been replaced by our new markers now it's great having our custom icons but what we want to do is to allow users to be able to click on those icons and then a little info window will pop up so they can see details about that Bakery let's create that object now okay so I'm going to create a new google.maps.info window object and give it a Min width and a Max width of 200 pixels and then back down below in our for loop we're going to create a function that will display this info window so I'm going to call this function create info window and inside I'm going to declare a variable that will house our content I'll leave it empty for the moment and now we need to add a click event handler so when a user clicks on a marker it will bring up the info window so inside this click event handler we are going to do two things first we're going to set the content with the content variable we created previously and then we're going to open that info window and as we can see in the console I've made an error when we create a new google.maps.info window the info has a capital I so it's case sensitive I'll just fix this here and refresh okay fantastic so our error is now gone from the console and when we click on a marker it displays an empty info window let us now populate the info window with the content from our markers such as the name and address a quick refresh and click on one of our markers to test that the info was pulling through and great now we can populate the real data and all we're doing here is including the properties from our marker objects so it's markers I is the counter in our for loop at that location name and the address so now when we click on one of our pins it will show the name and address of the bakery and before we move on I'm just going to clean up the info box just a little bit I'm going to tweak the font weight the margin and line Heights and I think that looks a lot better let's pop back into the main.js file at the start of this video we manually entered the longitude and latitude values to Center our map there is a better way and one that will accommodate as many markers as you add to the map we are going to create a Google Maps longitude and latitude bounds object this will accommodate as many markers as you want to add to the map and Center your map automatically in our for loop we're going to add our markers longitude and latitude values to the bounds extend property and then finally add in our bounds to the fit bounce property in our map object and then once we refresh the page all of our markers are centered perfectly inside the map now what I'd like to do is once we close the info window I'd like the map to recenter so I'm going to add this functionality in now but first thinking about it this code doesn't have to go into the create info Windows function it can go outside it so I'm going to move it there now so now we're going to create another event handler this one is called close click so when we close the info window something will happen and then all we do is simply add in our code from below map.fit bounce and the map will recenter just like that pretty cool and looks like there's only one thing left to do for this tutorial and that's to style our map so we're going to go to snazzymaps.com and choose a color scheme to add in our map now you can create a completely bespoke color scheme for your map but I'm just going to copy and paste one called ultralight with labels as it suits my color theme so once I navigate into this color theme I'm going to copy and paste the JavaScript array go back into the main.js file create a Styles property and paste it into our map options so a quick refresh and we can see our map looking very nice indeed so we have our custom icons we have a lovely map color scheme and everything is centered so I think that's a wrap thank you very much for watching any comments or suggestions for future videos please let me know in the comments thanks again and catch you guys in the next one

Channel: Frontend Hero

Views: 3,846

Keywords: google map, api, custom, map, javascript

Id: 6Tl3ROOgvgw

Length: 13min 0sec (780 seconds)

Published: Thu Aug 10 2023