Create custom Google map with iframe embedding

Create custom Google map with iframe embedding


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
“google.com/maps”. 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 “mapstyle.withgoogle.com”
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.

20 thoughts on “Create custom Google map with iframe embedding”

  1. Hey sir, is there any way to manage the map in codes? Perhaps we wanna check if our location is in our custom region then something happen. Ty

  2. Hey you have though me how to use this google map online,cause I was struggling in applying it into power point.

  3. Assalamu Walaikum. Brother it's really awesome! I really learn a new thing from you. May Allah bless you.

  4. Thanks for your explanation, i need the filter the layer that i created, is it possible, you can see the example of my willing in this site : https://www.gtt.net/gb-en/our-network/ Please reply me asap…. Thanks

  5. This is a very good video. I appreciate this. Being a blogger and a digital marketing services provider I really need it for me and for my client.

Leave a Reply

Your email address will not be published. Required fields are marked *