Google My Maps Tutorial

hi this is mark from wiki design in this video i'm going to cover everything inside the google my maps tool and how you can embed it on your own website now the first question that you might ask is what is the difference between google my maps and just a normal google maps and the answer is google my maps is a hundred percent free and is going to require no custom programming whereas using the regular google maps is going to require you to either purchase a plugin or you're going to have to hand code all of these maps yourself now i'm going to show you what a google my maps can look like so in this example this is our travel website where we wanted to have an interactive map with markers of all the places that we have visited and we have tied to a blog post so in this example we wanted to have it where the user can interact with the map and see exactly the places we've been to and then when a user would click it it can be linking straight to our blog articles so in this example we have a whole section of the places that we have visited in san diego and all the articles and you can see it just opens up a new page and is all tied to that one marker before we continue with the tutorial i would like to make you aware of just two limitations that you might see using google my maps and the number one limitation is each map can only have up to 10 layers so if we go back to our example we put all of our markers inside this one layer called places we visited so if you plan to have a whole bunch of different type of layers clustered with your markers you can only have up to 10 layers so you might have to get a little more creative with more complex maps and the next limitation is each layer can only have up to 2000 lines shapes or places and you can see right here you can have up to 10 000 lines shapes or places in total or 50 000 total points so i would say in most cases you're not going to hit these totals unless you start to import a bunch of data into your maps and in that case you might have to actually go and use google maps instead because you won't have these type of limitations now let's jump right into the tutorial the first step you need to do is make sure you're logged into your google account and go to google.com my maps and what this is going to do is redirect you to this new dashboard and as you can see i already have a few maps here but since this will be your first map you just click right here create a new map and the first thing i recommend you do is go up to where it says untitled map and name your map this is going to be what the users will see so make sure it's something that is user friendly so i'll just do a 2021 test map you can add a description if you like but i'm just going to hit save and right out of the gate you're going to notice this is a pretty simple interface but there's a lot of functionality to it once you get into all the settings now what i'm going to do in this tutorial is go through each one of these different tools and how you add them to your layers and then at the end i'm going to show you how to take the code on here and embed it onto your website the first thing i recommend you do is create all the layers that you would like first and then we can start to add in the markers the shapes the lines underneath those layers so in this example i want to have three different layers let's just call them markers lines and shapes so you can see right here google automatically adds this one called untitled layer so let's call the first one markers this is where we're going to have all of those little pins pop up and let's be organized and have another layer called the line tool so all the different lines and then we have one more layer just called shapes and we just call this layer shapes now i'm just going to go down each one of these tools and add these different shapes lines markers whatever it may be under the layers the first thing i'm going to cover in this tutorial is how to add the custom markers now a marker are these little hot spots that the user can click on interact have an image title description all that good stuff so the first thing you want to do is make sure that you're on the correct layer and then as you can see i'm clicking around here and this blue line is appearing that shows what layer you're currently selected so in this case i want to have all of our markers underneath the markers layer so i made sure that that was active and if you click right here where it says add marker now you're going to be able to add a marker anywhere on a google map what i recommend is zooming into the area where you would like the marker to appear so let's say i want to add a marker in the middle of the park i would just click here and that's it you've officially added your very first marker now we need to go ahead and add a title and a description so let's just call this marker just park for now and a description is where of course you're going to add any descriptions talking about what the marker is and then this is where you're going to add any hyperlinks so i'm just going to add the word test and a hyperlink to our website now you need to make sure that your hyperlinks are going directly to these urls because you can't do any short urls or anything like that google wants you to make sure that you show the full url so the user knows what they're clicking on so once you do that you would just click on save the first thing you can customize on your marker is the style now under the style is where you're going to change the color and what the icon is on the marker so in this case let's say i want to add a marker that is black and you can see underneath here where it says popular icons google gives you a selection of the most popular icons and in most cases most people will use the generic pin drop icon but let's say we want to add more icons so if you click on more icons you have access to a bunch of different icons that google has pre-selected for you or in this case we can add a custom icon and as you can see here i've added two pictures of just myself and now if you want to add a custom icon of yourself or anything like that you can click where it says custom icons now you're going to see a new interface where it gives you the ability to upload images you can place a url here so if you have a link to your website with an image you can do that here you can do it through your photos google drive and then they give you the ability to actually search for images on google so in this case i already had some images in my google drive i could just click here and click a picture of me you would just hit select and now anything that you ever add under custom icons will appear down here so let's say i want to add that image i just selected you would just hit ok and that's it now we have a marker with the title the description a link and a custom icon now at this point i recommend you do a preview on how it looks on the front end so to do a preview you would just click right here where it says preview this is going to open a new tab and show you what you've done so far so in this case we just have the one marker showing and we have it right here where if you click on park it just has the name the description and a link to our website so if a user would click that it would just redirect them to our website and you could see right here we have the picture of our custom icon right here so so far everything is working perfect and this is how it's going to look on the front end now we can go ahead and add some more functionality to these pop-up markers so that was the styling the next thing is called edit and what this does is give you the ability to change the title again and if you need to make edits to your description so that's where you would do it you just click it edit this next step is this is how you can add i'll show you right here on our example how you can add an image to the marker and they also give you the ability to add a youtube video there which is kind of a newer feature so let's go ahead and click on that and similar to the icons that give you a whole bunch of different ways to add your images so in this case i let's say i want to just upload an image of one of these waterfalls i have on my desktop i just clicked upload selected it and now you can see we have a picture of a waterfall now let's go ahead and add a youtube video in there you would click on youtube search or if you have the direct url you could type that in here but let's just go to our youtube channel click on search and now you can select which youtube video that you would like and it goes by keywords so you would just hit select and now you can see right here this marker is now like an interactive slideshow with images and videos so you would just hit save and that's it what i recommend is anytime you do any sort of changes to your markers just go ahead and do a quick preview just click on preview again select your marker and now you can see that there's the image and when the user clicks on the image here it's like a slideshow like i said so now you have you can have multiple images videos so it makes it a really interactive marker and as you can see here everything is exactly the same that we have in the market you click on our website it will go straight to your website and the last tool they have here is called directions to here so if you would like to add uh directions to get to this marker you can just click this button and what this will do is now add a new layer and give you the option to have directions on how to get there from point a to point b whereas b would be the marker that you have here this is where the limitations can come into play so like i said you can only have 10 different layers and the problem with google my maps is every time you do driving directions it's going to add it as a whole new layer so i'm going to cover that later in this tutorial but i usually don't recommend adding multiple driving directions just because of that limitation so let's go ahead and if you click on any of these layers if you click on the three dots here you can either rename the layer or delete it so in this case i would like to delete that layer you would just hit delete and now that's gone the next thing i'm going to cover in this tutorial are lines so just like the markers you want to make sure that you're selected on the correct layer so we have the layer called lines i have that selected now if you go up here where it says draw a line you can just click that tool and make sure that you're on this layer right here which says add align your shape so let's say i want to add a line where my mouse is where it just follows this road down here so what you do is you just click on the very first point and as you can see this gives you the ability to add it anywhere so let's say i want to add a line that just follows this road for some reason so you would just do that and now whenever you're done with creating your line you would just go right here and click on the very last point you can see the mouse turns into a pointer so that's it now you have a line so we just keep the line name line one this is just the description just like the marker and this is gonna be a little bit different because since this isn't an icon they give you the ability to change the width of the line so as you can see the slider down here you can click and drag it to as little or as wide as you want now i recommend keeping it where the user can still see it when they're zoomed out pretty far so this is going to be a case by case but i recommend having it somewhere around the middle just so the user can see it at multiple zoom extents and just like the other one you can change the color of the line here so let's say you want to add it to be like a purple line and just like the marker you can always go back and edit the title and the description here by clicking the pencil and same thing here you can add exactly the same amount of images or video or anything like that so when the user clicks on the line you can have a show an image for some reason the next thing i'm going to cover is a shape now shapes are a little bit different than lines because you have to close it and then they give you the ability to add a whole overlay color to it so let me show you exactly how to do that so just like with the lines of the markers you make sure that you're on the correct layer so i'm on shapes and right here where you added the lines the same exact thing but this time you need to make sure that you close your line so let's do it around this whole block right here so if you just click here and here and you have to like i said you have to close it to make it a shape and not just a line tool so now you can see that this is a shape let's call shape and then just we're testing here for the demo okay so now you can see we got title description and they give you one extra thing called transparency so the width of the border is exactly like your line tool so let's say we want to add this to be like a yellow you would click here you click where yellow is and now you have this whole shape and you can change the transparency so transparency is of course you can see when you do the slider it goes from 100 percent solid to 100 transparent so this will be of course different on your use case and the color that you choose so sometimes darker colors you need less transparency and the width of the border you can see right here just changing right here so usually what i recommend is having it where you can see something underneath it so something along these lines might work for like a yellow color and just like the line tool you want to zoom out and just see how it looks when the user is about you know this far away and now you can zoom in so that border might be a little bit thick so i just go in here and change that border width to something like that and just like the other tools you can always edit the title description here and you can always add an image so let's say we want to just add an image so i can show you how this works just like the markers you can add images and youtube videos click on save and now let's hit that preview button again and as you can see it shows shapes this is the shape right here if you click it it has the picture of the image as i just uploaded and the title the next thing i'm going to cover is how to add a custom driving route to your google my maps if you go under the line tool again and you click on add driving route this is going to give you the ability to add custom driving routes to a layer so as you can see it automatically adds its own layer for driving around and like i mentioned in the beginning of this video you can only have up to 10 layers so you need to make sure that you're very selective on the amount of driving routes you're going to have on your google my maps so let's say we want to add a driving route from like a city hall to the written house area here in philly so i would click right here so as you can see as soon as you click it automatically adds an a point now we need to go to where you would like the final destination so let's say the park area and what you need to do here is double click so i'm going to double click here and give it a second and now you can see right here it added a point a and a point b and you can see that the flow went like this instead of going down here this is because this is using you know google's technology on which roads are the most efficient which ways that you can go and which road you cannot go down so you can click and actually drag this around if you want to add a different route but i usually don't recommend doing that because the route that google selected first is usually the quickest route so you can always click and drag it around if you would like now we can go ahead and actually add a destination if you would like to add a destination you would just click you know a spot that you would like this uh point c would be so you do another double click here and you can see it goes from city hall then it goes to the park and it goes here so let's say you wanted to click and drag it where we go from city hall to this point back down to the park so they give you the ability to do this this is really cool you can click and drag point c up and now you're gonna see it goes from city hall point b is now this custom marker here and then we go back down to the park so they do give you a lot of flexibility here um but i would recommend that you only add like i said a few of these to your map because you're very limited to how you can use these driving routes google gives you another ability to add a custom driving route so if you click right here where it says add directions you'll see that it automatically will add a layer for you and in this case instead of adding the custom points like we did before where you click on where you would like to go you have to use a search function inside google instead of clicking so let's say for example we wanted to go from the city hall area which was right here and let's say we want to go to the mint which is right over here so we would type in united states mint and it automatically will know what city you're in so you don't have to worry about going to a whole different town but as you can see right here it automatically added point a from city hall to the united states mint and just like the other marker if you would like to add some other destination in the middle so let's go to reading terminal which is a big food market not far from there you can see point a city hall go to the mint and go to reading terminal and just like the other one you can click and drag stuff around so if we want to go from city hall writing terminal to the mint you can just do that right here and the last tool up here is called measure distances and areas so this is going to give you the ability to just get a reference for how big a section is or how long a road can be so let's say for example we just wanted to see how far distance wise is this a road vine for a couple blocks so as you can see i just click on this point in this point and it's 0.4 miles and if you would like to see how big a whole area is you can just continue to click until you close up the whole area so similar to the shape tool you would just make a circle a square whatever shape you need and close it and now you can see this whole area is 1.25 miles so i don't really use this tool very much but some people might have a use case for it next i'm going to show you a really cool feature that might save you a lot of time and that is being able to globally change all of your styles underneath each layer so you might have noticed this button right here called individual styles and by default that is what every layer is set to when you first make your layers so what that means is each one of these markers has a unique style which is what we assign so in this example we have a red one yellow blue and a custom icon of me so let's say we want to go ahead and just globally change all of that to one style instead so what you would do is you click here and instead of individual styles you can go to uniform style and what this does is now gives you the ability to globally change all of the styles so this could save you a lot of time if you need to go ahead and just change a whole bunch of markers so let's say we want to change this to like a red and a different icon so we would click on the red and let's change it to a house so as you can see each one of these is now globally changed so you can always go in here and just change that right here and they also give you some other functionality in here so if you wanted to have numbers instead you could do that here and you know change the numbers here and it will globally change all of them to that color too once you're done adding all of your different layers and functionality now you can start to prep your map to be embedded onto a website and there's two things that i usually recommend you do before you start to embed the code and that is change your base map and set your default view so let's go ahead and click down here where it says base map and as you can see they give you the ability to change the styling of your map so this is what it's going to look like on the front end of the website so once you embed on your to website the user is going to see it just like this now in most cases people are used to this format because this is what like google maps uses all the time but if you need to see you know a real terrain or real imagery you can use something like this instead so next we need to make sure that we set the default view and if you're not familiar with what that is that's basically telling google how far do you want it zoomed in or out of the map when the user first gets to your website so i'm going to show you some previews of what it looks like so in this example we have the base map set and if you click right here these three dots if you click on this button right here where it says set default view now this is the zoom extents that the user is going to see when they first get to your embedded map so let me click preview so you can see and as you can see if we were to embed this on our website right now it would look just like this but let's say we have a case where we want to be zoomed in more to a section so let's say we want to zoom in to the park at this zoom what you need to do is go back here and set your default view again so now once you click that you can see it says it's saved you click on preview and now this is going to be how it looks when the user sees it on your website the final step to get this onto your website is you need to grab the embed code and then throw that on your website and you'll be good to go but before you do that you need to do one setting and that is click where it says share and underneath where it says get link you're going to want to make sure that this says anyone with the link and in most cases you're going to want to keep this at viewer because if you change this to editor anybody is going to be able to edit your map so if you have a use case for that you can select that but i found in most cases you just want to keep this at viewer anyone with a link now when you click done you can go up here click on those three dots and click on embed on my site and that's it now you copy and paste this code onto your website now that you have your code copied you just need to paste it as an iframe inside of your website and in this example we build all of our websites with elementor i just brought over an html widget and pasted in that html code i did change one setting right here i changed the height of it because by default it was a little narrow so you could go ahead and just change the height to whatever fits your website so once i did that i hit update and now this is what the google my maps that we just created looks like and as you can see the user will be able to click here and open up all of your different layers turn them on and off you can also click the share button the user will be able to share this on social media and they can even embed it if they would like and this is a cool feature that gave you the ability to go full screen and the best thing about this is it's fully responsive so let me scale down the website and you'll see that it responds to the width of the container automatically that's what's great about this tool you don't have to touch any code besides just copying in that html iframe that's it and that is the end of this tutorial i hope that this was helpful if it was make sure you give it a thumbs up subscribe to this youtube channel and hit the bell to receive notifications when we release new videos like this thanks again this is mark from wiki design you

Channel: Wicky Design

Views: 94,089

Keywords: googlemaps, mymaps, interactive map tutorial, custom map for website, embed google map, custom markers, google map tutorial, website google map, google my maps, google mymaps, mymaps tutorial, create google map, how to create a google map, make a map online, creating a google map, embed google maps into website, embed google map in wordpress, my maps tutorial, custom google map for website, creating a google map with multiple pins, creating a google maps overlay, google maps

Id: DKv0kaxY2JE

Length: 24min 53sec (1493 seconds)

Published: Fri Jan 08 2021