Video transcript: Assalamualaikum my name is Widhi Muttaqien from expose academy. I usually do CG related tutorials in this channel and mostly around 3D. But currently I want to make a different tutorial which is about creating custom google map. I need to create this tutorial because I\u2019ve got question a lot regarding this issue. I\u2019ve been teaching web design and development at several universities since 2001 and also do a lot of web projects for clients here in Indonesia. Instead of answering the questions from time to time, I figure that if I create this tutorial; it will save me a lot of time in the long run. And it should be more useful also to a lot more people out there, not just for my students or for my clients. Okay, so what is custom google map? Imagine this scenario. You want to hold a sport event like marathon or biking or perhaps motor rally for example. Of course, in your event\u2019s website you will need to explain the event\u2019s route to the prospect participants. Or another example perhaps you want to create a wedding event website and you need to show the direction to all of the invited guests. So you understand now, how important custom map is for a lot of reasons. Now to embed custom map to your own website, you need to use the iframe embed code. This is true not only for basic HTML and CSS site, but also if you are using custom theme inside wordpress CMS for example. Most of them will require you to paste in the iframe codes. Okay, so to create custom google map, first, I believe you need to have a google account. If you don't have any, just create a gmail account. After you have one. You can go to the google maps URL which is \u201cgoogle.com\/maps\u201d. Most likely you will see your face or your profile picture at the right top area, and you will see the location search box at the left side. Now you don\u2019t want to search your location in here, instead click on the sandwich icon in here. You will see a lot of options. Click the \u201cyour places\u201d link in here. Okay in this page you can see all of the places that you\u2019ve labeled, saved and visited before. Now what you really want to access, is in this \u201cmap\u201d tab in here. All of these items are the custom maps that you\u2019ve created before. It will be empty if you haven't create any. To create a new custom map simply click this \u201ccreate map\u201d button down here. Now, we\u2019re inside the page where we do the actual works of creating custom map. The first thing you might want to do is to give your custom map a name. To do that simply click on this \u201cuntitled map\u201d text up here. For example I want to give this map a name \u201cBekasi barat shopping route\u201d. This is a name for a location near where I live, so you\u2019ll be hearing me reading some of them with Indonesian spelling. Then lets add a description, for example \u201cMy shopping plan route at Bekasi barat\u201d. Again this is just for example, you can put any text you want. Next, you can zoom in manually with your mouse or if you want to zoom in directly to a certain place you can type in the location name in the search box up here. For example \u201cbekasi barat\u201d. Okay now you may notice that beside zooming in, google map also add this location icon or marker to be exact in the center of our map. We\u2019ll discuss about this later. For now I want to explain the idea or the basic concept of custom map first. Essentially a custom map is like this. We have the base layer which is the basic google map. Then on top of this base map we can put layers. We use layers to organize our custom objects. For example you may want to put all of your custom locations in one layer. Your custom directions in another layer and then your custom region or area on another layer. About how many layers or the name of the layers, It is really up to you to decide. But before we talk about these layers, we can actually pick different style for the underlying google map. To do that we can click on this \u201cbase map\u201d and choose the style you like. Okay now you might be wondering, how can I create my own style. Well, to create your base map style, is kind of more advanced discussion because for that, you need to play around with google map API. For start you can go to \u201cmapstyle.withgoogle.com\u201d which enable you to create your own base map style. But I want to keep things simple in this tutorial so we\u2019re going to use only the styles provided in here. You can pick any style you like later, but for now please choose the default one which is this one at the top left corner. You\u2019ll understand later why we need to do this. Okay now lets talk about the custom layer. By default we already have a layer provided by google which is named \u201cuntitled layer\u201d. Lets click on the name and rename this to \u201clocations\u201d. If you need to create a new layer, you can do so by clicking this \u201cadd layer\u201d button in here. If you want to delete a layer you can click on the dots button and choose \u201cdelete this layer\u201d. Okay, now what you see in here as the location marker \u201cwest Bekasi\u201d is the result of a search we did before and by default this location marker is not part of any layer yet. If you want to put this location marker into your location layer. You can either click this plus button or you can click on this marker and then click this \u201cadd to map\u201d button in here. Now, this \u201cwest bekasi\u201d location marker already become a member of the \u201clocation\u201d layer. Lets see another example, lets search \u201cmetropolitan mall\u201d and lets add this to our \u201clocation\u201d layer again. Now, If you want to remove it, for example I want to remove the \u201cwest bekasi\u201d marker. Just click on it and then click this trash icon button in here. Okay, to add an existing location marker, beside using the search box up here, we can also directly click on any existing marker in the base map. For example let me move and zoom in to this location and then click on this \u201cgiant mega bekasi\u201d and then click the \u201cadd to map\u201d button in here. Now if before, you choose other base map style, for example this \u201csimple atlas\u201d in here. You wont see any existing location. You only see the location markers exist in your custom layer. So to add existing location, with this style, you need to rely on the search box up here. Okay. Next, because this is a custom map, of course you can create your own custom location marker which is not exist yet in the base map. To do that click on this \u201cadd marker\u201d button and then click in here for example. Lets name this one \u201cbekasi cyber park\u201d and just leave the description empty. Click the save button. You can move this marker around. You can customize this marker to your liking for example changing its color. To do that just click on this style button in here and pick any of these colors. I\u2019ll pick orange color for now. You can pick the icon for your marker in here. If you click the \u201cmore icons\u201c button down here, you can choose from more variety of icons. If you don\u2019t find the icon you are looking for you can even upload your own image. To do that you simply click on this \u201ccustom icon\u201d in here. For now, I don't really need to upload any custom icon. I will choose this shopping cart icon instead. And click the okay button. Next is this button. This button is for editing the title and the description. This one is for adding image or video. I will need to skip this part to save time, feel free to try this with your own custom map. And this is for direction, we will discuss direction later in this video. For now lets see how we can create area or region. To create an area, click on this button and then choose \u201cadd line or shape\u201d. Click and release in here, then in here and so on until it loops back to where it started. This will create a shape. You can then define the color, the transparency and the border of it. If you want to create a line and not a shape, you can use the same method but you need to to finish off by pressing enter. For example lets click this button again, choose \u201cadd line or shape\u201d. Click in here and then here and then here, and to finish off this line, press enter. Now unlike shape, if you have line you can only control the line color and the width of it. You can not control the transparency. If you need to edit these line or shape, you can select it visually from the map or from the object list in the layer. And then just drag around the points. You can add more points by dragging the middle point like this. And if you want to delete a point simply right click on it and choose \u201cdelete point\u201d in here. I believe you can explore the rest of these features by your self. Lets move on to creating directions. Now \u201cdirections\u201d is a bit different from the rest of the objects, because they have to live inside a special layer. Okay, so how can we create directions? There are at least 3 methods to do this. The first method, we can click on this button, then click the first location marker. We can see the location that get selected in here. Of course to create a direction you need at least 2 locations, right? So click again on this marker for example. Now we have a direction. If we need to add more destination, click on this \u201cadd destination\u201d button and then click on another marker. Now we can create a loop by clicking the \u201cadd destination\u201d again and then pick the first location marker we have on top. The second method of adding direction is by using the control click method. First lets delete this layer so we don\u2019t get confused. Or, sorry, lets just hide the layer for now. Because we haven't talk about hiding layer before. So again this check box is used to hide or unhide layer. Okay. So the second method to create direction is by clicking any of this location, then hold control and click and click again to add more location. Now you must take note, that the order of the clicking is very important. The direction will flow based on your clicking sequence. Just click on this add direction button. Wait for it, and there you go. For the last method. Lets hide this layer again. You can click on any of the location marker and then click this \u201cdirection to here\u201d button. Now you must remember that by using this method, this location will be the \u201cgo to destination\u201d and not the \u201cfrom to location\u201d. That is why it says \u201cdirection to here\u201d. So after clicking this button. Next we need to click other location for the starting point. I\u2019m sure you get the idea here. Next, after we\u2019re done creating our custom map. To embed this map to our website. We need to make sure first that this map is public. If it is not, google won\u2019t allow us to embed the map to any website. To do that we can click the \u201cshare\u201d button in here. Click \u201cchange\u201d and then choose public. Okay, now that our map has the correct sharing permission which is public, to generate the iframe code you can click on this 3 dots button up here. Then choose \u201cembed on my site\u201d. And there you go the iframe code, just copy it and paste it to your own website. Just for the proof, let me open my blog dashboard which is actually a wordpress CMS. Create a new page. Now, because we want to paste in codes we should be in the text mode in here and not in visual mode. Paste the iframe codes. And, I really don't need to publish this page, so I\u2019ll just use the preview button in here. As you can see we have successfully embed a custom map. Okay guys, I hope this short tips video can help you build your own awesome custom map. Of course there are a lot of things I haven't cover yet in this video, but I believe you will be able to explore them your self after watching this video. As always, subscribe to my channel, share the video. Give a thumbs up if you like the video, and give a thumbs down if you hate the video. Check out my other tutorials. Wassalamualaikum.