Use the Google Maps API to build a custom map with markers

It's 2021! Super Nintendo World theme park has  opened in Tokyo and since we can't go there   (oh no!) why not bring Mario everywhere we're  gonna take the Google Maps API and turn this   into this okay ready let's go to build this map theme we're going to be using  the new Google cloud console the maps JavaScript   API and of course some HTML and CSS but before  we get started I wanted to thank the sponsor of   today's video DevProjects by Codementor if you're  looking for coding ideas check out DevProjects   they're a free collection of real world projects  for web mobile and more the coolest part about   it is that if you join you're actually joining a  community of other developers you can submit code   solutions share and receive feedback and discuss  projects with both peers and mentors on the   platform the custom Google map that I'm building  in this video is also listed as a project there   linked down below alright let's get started the  first thing we need to do is go to the Google   Cloud Platform website at console.cloud.google.com  up in the top navigation click the select the   project drop down and select new project give  your project a name I'm going to name mine Super   Mario World map and you can leave the location to  default and then hit create to create the project   this might take a few minutes next one quick tip  is to go to the menu and pin the items that we're   going to be using the most in this project there's  just so much in the Google Cloud Platform that you   can easily get lost so I recommend pinning  APIs and services in the product section   and also Google Maps Platform in the other  Google solutions way down at the bottom that   way you can open the platform menu and quickly  access the APIs and maps items whenever you need   now let's create our custom map in the menu go  to Google Maps Platform and select map management   you're going to want to click create new map ID  up at the top give the map a name and under map   type select JavaScript since we'll be using the  maps JavaScript API for JavaScript options you   can select either raster or vector raster is a  default type that uses image tiles and vector   is a newer type that uses WebGL and vector tiles  not all browsers and mobile devices support WebGL   so I'd stick with raster for now create your map  and note the new map ID as you'll need it later   now that the map is created we're going  to create our custom style for the map   in the Google Maps Platform menu select map  styles and click create new map style under   create your own style make sure Google  map is selected and then click save at   the bottom in the pop-up window give your  map style a name and click submit to save now here's where the fun begins click customize  style and you'll see the default map open with   all the feature types that you can customize since  I want my map located around the Super Nintendo   World theme park I can type in the park name and  go there before styling the map we need to get   the colors of the Mario map so I found an image  of the map online and then opened it in an image   editing program for windows called Irfanview but  you can use any program that has a color picker   like Photoshop so I took the colors of the water  the ground and the rose for my map you'll need to   get the colors in HSL or RGB for the Google map  customization now that we have our colors we can   start adding them to our map styles under the  feature type section you can choose different   features and customize them so let's start  by making the landscape features bright green   click on landscape and under the element type  section click on fill then color this will pop   up a color picker I'm on windows so this may look  different for macs first off I'm going to reuse   this bright green color so I'm going to save it to  the custom colors click on the first custom color   square to select it and you'll notice that it'll  immediately make all the landscape black on the   map this is because that's the default color so  let's now add in the RGB values for bright green   once that's done click add to custom colors  and that'll save the bright green color so   we can use it later click ok to save and now the  landscape features have been set to bright green   next up let's make that water the blue color  so in the feature type section scroll down to   the bottom and select water do the same thing  we did before clicking on fill and then color   we're going to save this as a custom color  as well in case we need this in the future   so click on that second custom color square add in  the RGB values for the blue color and then click   add to custom colors to save it and then select ok  to save all right we're getting the map looking a   little bit more Mario with every step next up  let's make all the rows at light beige color   so in feature type select road fill and color  select the third custom color square and enter in   the RGB values for that light beige color and when  that's done click add to custom colors and click   ok to save now let's set points of interest to  be the darker green color again we're going to   select the fill color but let's zoom out the map a  little bit so that we can see what we're affecting   we're going to create a new custom  color and setting that to dark green lastly let's set the transit fill colors  to the same beige as the road colors you can also choose to show or hide different map  features I don't really want to show most of the   default map pins for businesses and other places  to make it seem a little bit more like Mario world so let's hide most of the items under points  of interest click on attraction and then under   element type select all and under the stylers  change the visibility to off I'm going to be doing   this for most of the other types under points  of interest but obviously you can choose your   own preferences once all the customizations are  done make sure to hit save up at the top right and   publish alright the map is looking pretty good now  before we can add it to our website we do need to   get a couple of things the map ID for the initial  map we created at the beginning and our API key   we also need to apply all the map styles we just  made to our map so that it'll load our styles in   the website so let's do that first in the left  sidebar menu click map management and select   the Super Mario World map then under the map style  associated with this map ID click the drop down   and select the Super Mario World theme this will  apply all the style customizations to this map   we'll also need the map ID for our website so  make sure to copy and paste that somewhere or   just leave the tab open for later on now let's  get that API key first off we want to enable the   Google Maps JavaScript API click APIs in the  left sidebar and select maps JavaScript API   click that enable button and this  might take several seconds to finish   so once it's done it's going to load a dashboard  to show your API usage don't worry if you get   a message saying error occurred retrieving  client ID next up in the blue Google Cloud   Platform top nav click the hamburger menu and  select APIs and services and then credentials   click the create credentials link up at the  top and then API key to generate your API key   now once the key is generated it's going to  display on your screen and you can copy it   for later and one very important note if you're  going to use your API key in a live production   website you must restrict it otherwise anyone  can snag your API key from the website source   code and use it for their own purposes and it  could also incur billing if you've added a credit   card to your Google Cloud Platform account so to  restrict your key click on the restrict key link   type in a name for your API key if it doesn't  have one yet I'm going to name mine Super   Mario World Google map key then under application  restrictions select http referrers then add a new   item and then fill in the allowed domain and if  you want to limit which APIs your API key can use   under API restrictions select restrict key and  then in the drop down select maps JavaScript API   hit save when you're done and you should be good  next up we're going to finally build our website   and load our map in it using the Google Maps  JavaScript API and just a little bit of CSS so   open up the project folder in your favorite  code editor I'm using vs code with a custom   theme that I made called Coder Coder Dark  if you like my theme you can install it from   the extensions menu in vs code or use the link  down below in the description so in our project   we have an index.html file a script.js file  and a style.CSS file in our index.html file   we're going to use the exclamation point emit  shortcut to automatically add boilerplate HTML   then we'll add in a title for the page I'm naming  mine Super Mario World Google map but obviously   you can name yours whatever you want and we also  want to add a link to load our style.CSS file and   a script tag to load our JavaScript file then in  our style.CSS file let's add in some boilerplate   CSS so I'm setting box sizing border box in the  HTML selector so that padding won't affect the   final width or height of elements and I'm making  the font size 100 for better accessibility then   I'm using the wild card to select all elements as  well as all pseudo elements both before and after   and having them inherit that box sizing property  then for the body tag I'm just going to set it to   have no margin or padding now let's load this  website in our local server I'm using the vs   code live server extension so when I click the go  live link at the bottom of vs code it's going to   launch the site in our browser it's blank for now  since we haven't added anything to the HTML yet   to load the map in your code we need to get a code  snippet from the Google Maps API documentation   so in your favorite search engine I  use duck.go we're going to search for   Google Maps JavaScript API and  then load their documentation so if you scroll down the sidebar  menu click on styling your map   and then click on cloud-based tooling since  that's the type of map style that we created   if you scroll down to the code example  we're going to copy that script tag   now let's paste it into our index.html file after  our script.js tag the order is important as we're   using a callback function in the API URL that  we're going to create in our script.js file   now in the script tag we need to replace the API  key and map ID strings with their actual values   if you don't have these handy you can  get them from the Google Cloud Platform   go to console.cloud.google.com and just make  sure you're logged into the correct account then once it loads open the top menu and  under APIs and services click on credentials under the API key section find  the right key and click to copy it now going back to vs code paste that  key in the script URL to replace API key now let's get that map ID going back to the  Google Cloud Platform site in the top nav   navigate to Google Maps  Platform and map management   then under map ids click to open the map  that we created and copy that map ID over   then back in vs code paste it into the  script URL to replace map ID and then save all right now let's get that map working first  let's add a bit of text to the page I'm going to   add an h1 tag just so we have something other than  the map itself to make sure the page is loading   let's go to Super Mario World   we also need to add a div tag to the page  that's going to be loading the Google map   I'm going to create a div with an ID of map okay  so that's pretty much all the markup we need to   add now we're going to start writing JavaScript  to load the map itself remember that we're using a   callback function called initmap in the script URL  this is really helpful because it'll only run the   JavaScript that we're going to write once the API  has finished loading otherwise it would run our   JavaScript before the map exists and then things  wouldn't work so let's go into our script.js file   and load the map the first thing we need to  do is create the init map function now in this   function we're going to create the Google map so  going back to the styling your map documentation   going under to where we copied that script tag  we can just copy that code snippet there for   loading a Google map object paste that code in  the initmap function and then fill in the map ID   what this Google Maps object does is load a  Google map centering around the latitude and   longitude listed setting the zoom level  and loading a custom map via the map ID   so let's save it and see how it looks okay  so the website itself looks blank but if we   check out the inspector we can see that the map  div now has markup generated by the maps API   to get the map to display properly  we need to go back into our CSS file   and give the map div an explicit height setting  I'm going to say 60vh or viewport height units   now the map is loading but we're getting this  pop-up window and a console error message   telling us that we need to enable billing in our  Google cloud project if you're just using this in   a development environment you can just exit out  of the pop-up and not worry about it but if the   map is going to be used on a live site you will  have to add a credit card to the Google Cloud   Platform under the billing section but before we  get more into the map let's spruce up the look of   this website a little bit so I'm going to get an  8-bit looking font from Google fonts copy over the   link tag and then I'm going to paste it into the  head of our index.html before our style.CSS file we also need to copy the font family name and set  it as a font on the h1 tag I also want to make the   body background color black and default text color  to white all right that's looking pretty good I   think I'm also going to center the h1 tag and make  the font size a little bit smaller maybe two rems   all right that looks pretty good maybe set  a little bit of padding on the ends as well okay let's start tweaking the map now there are  a couple of things I want to change for our Mario   map first thing is I want to set the center of the  map to be where the actual Super Nintendo World   theme park is in Tokyo to get the location in  Google Maps I've loaded the Super Nintendo World   park if you right click on the map pin or anywhere  on the map I can copy the latitude and longitude   then back in our script.js file I can paste  it in just as a comment for now and then I   can adjust the lat and long values in our  Google Maps object to match that location   now when we look at the map we can  see that it is centered around japan   we are pretty zoomed out right now so  let's go back and adjust the zoom level the zoom range for Google Maps goes from around  zero for super zoomed out to around 22 for super   zoomed in I'm going to set this map to b18 to  show most of the universal studios japan park   in our map okay and now we can see the zoom  level of our Mario map matches pretty much   what we have in the original Google map so  this is what we're going to be working with   in our map the next step in Mario finding  the map is adding some custom map markers   we're going to be adding markers to our map and  instead of the default Google map pin we're going   to use these cool SVGs you might recognize  these images from the Super Mario World game   so let's start by adding one default map  marker back in the Google Maps documentation   in the markers section we're going to take this  code snippet to create a single marker object   so in the marker we need to set the latitude and  longitude set the map object that we are adding   to the marker to and have an optional title  so copying that over to our JavaScript let's   also go into the Google map to pick a random  location in the park to give the latitude and   longitude values for our marker we're going  to paste those values to the marker position and let's check out our map okay  so the marker has been added to   the map now let's work on loading one  of those custom images the Google Maps   documentation is pretty comprehensive and  they have some pretty handy examples in the   samples section so in this example it's loading  a PNG image for the map marker if we look at   the JavaScript code down below we can see that  it's using an icon property set to the image URL   however since we're using an SVG image for our  markers we need to add some additional fields   for that icon property to find out what those are  we can go into the reference section and look at   marker objects it tells us that the different  properties that we can use for our icon   so we're going to be using the  URL property to set the image URL   and then we're also going to be using the scaled  size property to control the final size of the SVG   without this the SVG image won't show up at  all on the map now going back into our marker   code we're going to add in the icon property to  the marker and in the icon we're going to set   the URL property to the SVG image and we're  also going to use the scaled size property   now to figure out what to set scaled size to we  can go back to the reference and click on that   size type so this tells us that it's going  to take a Google Maps size class with   two parameters width and height separated by  a comma so back in the code let's create a new   Google Maps size object and set it to 38 pixels  wide and 31 pixels tall I'm also going to set   the title of the marker to Yoshi's house making  sure to escape the apostrophe with a backslash so let's save that and check out our map   all right now you can see that it's loading the  Yoshi's house image all right so I decided to add   my credit card to the billing account just to  get rid of that annoying pop-up window so now   the map is loading some of the default controls  which I honestly don't really want to show up   I can get rid of them by manually turning  them to false in the Google Maps object okay so now we have our clean looking map let's  add a couple more fun things to our marker   so one thing we can do is we can add a drop  animation so that when the map loads you see   the markers drop onto the map we can do this by  adding the animation property to the marker and   setting it to Google.maps.animation.drop so if  we copy that over we can add this to our marker now when we save and reload the map we're going  to see that drop animation and there we go you can also create custom pop-ups called info  windows that open when you click on the marker   let's make an info window that  displays the name of the location   so if we look at the docs and  scroll down to that code example   we can see that we need to create a new info  window object and set its content to a string   then we need to add an event listener so that when  you click on the marker it'll open the info window   so let's take that info window code and  copy it over into our JavaScript file   and I'm going to set the string  to say Yoshi's house again   and now let's take that event  listener code and add it in as well now there's one more thing we need to do to  make this work we need to create the Google   Maps marker as a constant named marker that way  we can attach the event listener to the marker so   that it'll load in the info window okay so let's  save that and now when we reload the map let's   see if it works okay so clicking on the Yoshi's  house marker the info window appears but it looks   blank and this is I believe because I set  the color to white in the CSS previously   so fortunately we can style the info window so  I'm going to copy that class for the generated   marker and go into our style.CSS file add a  selector for it and then set the color to black all right so let's reload our site to make sure  so now when we click on the marker the info window   pops up and displays Yoshi's house okay  looks like I have a little typo there I   forgot to add the apostrophe  so let's go back and fix that alright cool so now we've added a custom  map marker to our map but we do have a lot   of other marker images so we need to add multiple  markers to the map each with our own location so   if we check out the docs we can look at this  example map that has multiple custom markers   going down to the code example it looks like they  are storing the location data for each marker   in an array called beaches then in the set markers  function it's setting the custom marker image   and at the bottom there is a for loop that creates  the marker object for each location in the beaches   array so we can do a similar approach with our  map first off let's create the array for the   markers under the map object let's make a new  array called markers yes very creative I know   and in that array we want to store  the name latitude and longitude   image URL and scaled size width and height for  each marker image now let's create the first   marker for Yoshi's house I'm going to copy and  paste the marker data that I'd previously set   and I'm just going to move it into the array  this is going to allow us to put the Google Maps   marker creation inside the for loop and then  running it through all the items in the array   okay so we've added the name latitude and  longitude image URL and the scaled size   width and height now let's create that for loop  and have it load the marker based on the array   I know there's just that one item in it for now  but once it works we're going to add in all the   other marker data so 4 let I equal 0 I less than  markers dot length and then I increment and we're   going to create a constant called curve marker  which will be the current marker in the array   now let's move the marker info window  and event listener code into the for loop   and we're going to replace what we had hard  coded for Yoshi's house with the array data   so the name is the first field so  cur marker zero then the image URL   is going to be curve marker three so the  latitude is going to be curve marker one   and then longitude is going to be curve  marker two and then scaled size is going to be   cure marker four and five then we'll do the  same thing for the info window and replace   it with what we set the title to which is  curve marker zero all right and the add   event listener should be good so we will save  that and check out our map and see if it worked all right the marker loaded which is great  and looks like the info window is also loading   correctly now we can add the other marker  data to the array I don't want to bore you   with repeating steps seven different times  but basically I chose different locations   on the map for each marker and then set  them to have the correct image and name   and checking out the final map we can  see that it has indeed been Mario-ified! if you want to check out my source code for this  project or try this challenge out for yourself   you can find it on DevProjects by Codementor  linked down below in the description   also if you noticed I tried out a new  more edited format for this video tutorial   let me know down in the comments what you  thought of it and if you like this format or   my live coding format more and as always thanks  for watching and we'll see you next time!

Channel: Coder Coder

Views: 124,191

Keywords: web development, html, css, learntocode, javascript, google maps, api

Id: CdDXbvBFXLY

Length: 24min 0sec (1440 seconds)

Published: Mon Mar 01 2021