top of page

Create custom Google map with iframe embedding

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’ve got question a lot regarding this issue. I’ve 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’s website you will need to explain the event’s 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 “”. 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’t want to search your location in here, instead click on the sandwich icon in here. You will see a lot of options. Click the “your places” link in here. Okay in this page you can see all of the places that you’ve labeled, saved and visited before. Now what you really want to access, is in this “map” tab in here. All of these items are the custom maps that you’ve created before. It will be empty if you haven’t create any. To create a new custom map simply click this “create map” button down here.

Now, we’re 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 “untitled map” text up here. For example I want to give this map a name “Bekasi barat shopping route”. This is a name for a location near where I live, so you’ll be hearing me reading some of them with Indonesian spelling. Then lets add a description, for example “My shopping plan route at Bekasi barat”. 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 “bekasi barat”. 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’ll 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 “base map” 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 “” which enable you to create your own base map style. But I want to keep things simple in this tutorial so we’re 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’ll 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 “untitled layer”. Lets click on the name and rename this to “locations”. If you need to create a new layer, you can do so by clicking this “add layer” button in here. If you want to delete a layer you can click on the dots button and choose “delete this layer”. Okay, now what you see in here as the location marker “west Bekasi” 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 “add to map” button in here. Now, this “west bekasi” location marker already become a member of the “location” layer. Lets see another example, lets search “metropolitan mall” and lets add this to our “location” layer again. Now, If you want to remove it, for example I want to remove the “west bekasi” 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 “giant mega bekasi” and then click the “add to map” button in here. Now if before, you choose other base map style, for example this “simple atlas” 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 “add marker” button and then click in here for example. Lets name this one “bekasi cyber park” 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’ll pick orange color for now. You can pick the icon for your marker in here. If you click the “more icons“ button down here, you can choose from more variety of icons. If you don’t find the icon you are looking for you can even upload your own image. To do that you simply click on this “custom icon” 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 “add line or shape”. 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 “add line or shape”. 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 “delete point” in here. I believe you can explore the rest of these features by your self. Lets move on to creating directions.

Now “directions” 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 “add destination” button and then click on another marker. Now we can create a loop by clicking the “add destination” 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’t 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 “direction to here” button. Now you must remember that by using this method, this location will be the “go to destination” and not the “from to location”. That is why it says “direction to here”. So after clicking this button. Next we need to click other location for the starting point. I’m sure you get the idea here.

Next, after we’re 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’t allow us to embed the map to any website. To do that we can click the “share” button in here. Click “change” 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 “embed on my site”. 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’ll 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.

#custom #google #embed #iframe #maps

bottom of page