Tip:
Highlight text to annotate it
X
This is tutorial on how to build a custom map. This is for assignment #18. You need
to create a custom map using Google Maps and your map must include four elements. The first
one is a map title, a map description, at least three placemarks with at least two different
icons – we’ll work on that, and the fourth requirement is that your map have at least
one area marked by a shape. The shape needs to include a title and description. Then we
have to submit just the publicly accessible URL for your custom app.
Let’s go ahead and get started. Here as you can see we are on the iconic Google search
page. I do need to point out to you, however, that I am signed in with my account. You can’t
create a Google custom map without having a Google account. So just make sure that you’re
actually signed into your account. Once you sign in, of course, you’ll notice that you’ll
have your black bar up top and right at the black bar one of the choices is Maps. I’m
just going to click on Maps and it’s going to bring me right into the maps segment. Now,
this is where I would normally type in the addresses that I want to go to and so forth.
So, what I’m going to do is, I’m going to create a custom map let’s say around
Hotel Del Coronado in beautiful Coronado island because I happen to know that area somewhat
well. I’m going to come down here, as you can see, I can zoom in and here we are at
beautiful Hotel Del Coronado. We’ve got this beautiful view of the space. Because
I have a couple of plug-ins activated and I’m using the Chrome browser, I’m able
to now – when I get close enough – get a 45o angle of the space that I’m looking
at. This requires that you activate something called Web GL. You’ll see it once you get
into Maps, there will be a pop up that will say - Hey, would you like to activate Web
GL. So here we are at Hotel Del Coronado and this may be the place that I want to create
my map around. So, how do we get started? You get started,
again, remember I’m signed in by coming over to where it says My Places. See this
button? Simply click on My Places, and when you click on My Places it will take you directly
to building custom maps. So, as I click on it, you’ll see you get this whole new series
of information that pops up on the left hand side. All you need to do, as you can see,
is just click the red Create Map button. Now, once you click on that, it’s going to request
some information from you to type in. For example: What is the title of your map? Which
is one of the requirements of the assignment. So I’ll go ahead and call this “My Hangout.”
We’ll give it a description: “This is where my wife and I like to spend our weekends.”
Now, before I move forward and click on Save or Done, I’m going to ensure that the default
radio button is in fact checked because I want this map to be publicly accessible. Otherwise,
it will only be shared with select people and for this particular purpose we’re asking
you to create a publicly accessible map. So, in fact it is checked off. The public radio
button is checked off so I’m going to go ahead and click on Save. Fantastic, I’ve
got my first map titled and now all I need to do is click on Done to move onto the next
step. In this next step, I need to edit the actual
content of my map. So, I’m going to come on over to the red button and click on Edit.
Once I click on Edit, I can see that a few new icons have popped up onto the area that
I have zoomed in on. So, the first requirement was to have a map title. The second one was
to have a map description. The third one is to have at least three placemarks.
So, here is how we handle placemarks. This placemark right here, let me zoom in so you
can see it clearly. This Placemark icon is what you use, obviously, to create a placemark.
You simply click on it, and once you click on it as you can see, a placemark pops up.
You can pull it around and place it anywhere on your map that you would like to. So, for
example, I’m going to place my placemark right here by left clicking the “X.” Now
that I’ve left clicked, as you can see, a descriptor pops up and says – Hey, what
is this placemark called? So, I’m going to call it “Best place to park your car
on a weekend...” because I love to write “…” Perhaps it would be better for me
to refer to it as “Parking” and then mention that “This is the best area to find local
parking…” Now, notice that I’ve typed this in plain text, but I could have typed
it in as a rich text and I can even edit the .html which would be the code that lives underneath
this placemark simply by clicking on the .html. So this is the code that the browser reads
in order for it to pop up a description. If I click on the rich text link, notice what
I can do – I get an editing menu that pops up. So, for example, I can highlight the word
“best” and click bold. See, now the word best has been bolded. But I can do much more
than that, including adding a link to a word in this description or even adding an image
by simply hovering over the image icon.
So, that’s one of my placemarks and I need to have three placemarks. So, there is one
that I have already dropped in. Let’s do another placemark. In this case, again, we
are going to click on the Placemark button and we’re going to drag it and in this case
we’ll go ahead and drag it and put it right down here. Now, I’m going to call this “The
Ice Rink…” As a description I’ll say, “During the winter, this grassy area is
converted into an ice rink.” Now, one of the requirements of the assignment
is to have two different icons for my placemarks. So, the way you change the icon is in the
windowpane where you are adding the title and the description, you simply click on the
icon itself. Once you do so, it gives you several choices for you to select from. Admittedly
they are not fantastic choices, they are very map-oriented. As I scroll through I don’t
see too many choices that might be fitting what my placemark is all about. However, I
do see this little snowflake here, so I’ll go ahead and click on that. Since this is
an ice rink, I’ll go ahead a select this particular one. I’ll go ahead and leave
it as rich text. I’m not going to add any images or anything to that effect. I click
on “OK” and there is my second placemark. First one, second one. So, when I click on
that placemark, as you can see, I can go back and edit it if I wanted to. Same thing with
this one - I click on the placemark while we are in Editing mode, we’re not in the
actual map yet, we are editing the custom map. You can change the title, change the
description if you’d like to. I do need to add a third placemark. I’ll
do this one quite quickly. How about I place it right over here? In this case we’ll call
it “Mexican Food.” We’ll describe it with “Great grub.” Let’s change this
icon as well. Since it’s about food, we’ll change it to a food icon and click on “OK”.
So there we have it – our three placemarks with two different icons have been added.
We also need to add one area of our map because it needs to have a shape over it. Here’s
how the shapes work. It’s the button directly next to the Placemark button. You come on
over here and you can simply click on it and it’s going to give you several options.
So you want to draw a line, do you want to draw a line along roads where the line will
actually snap to the roads that are in the map, or do you want to draw a shape. Of course,
that is what we want to do. So I’m going to click on Shape. I’m simply going to draw
a shape around this parking lot. The way I’m going to do it is by clicking and drag to
the second spot and click and then the third spot, and the fourth spot, and the fifth spot,
and the sixth spot and I go back to my original click and click on that and walah! There is
my shape that has been created. A little blue overlay comes onto the parking lot area. So,
I’m going to go ahead and call this “Parking lot of the Del” and I’m not going to give
it a descriptor this time. I’m just going to click on “OK”. That’s all I have
to do. I’m basically done customizing my map here. I do need to save it. Once it has
been saved, you can see the button turns into saved - the text of the Save button turns
into Saved. The last thing I need to do is to get the publicly accessible URL for my
custom map and submit it via the drop box in the Learning Management System. How do
I do that? It’s this chain link just above the Saved button. So when I click on the chain
link, you can see here is the long URL if I want to shorten it, I certainly can do that.
Also notice that you have the opportunity to get the embed code if you want to embed
your custom map in a website or a blog or even in the Learning Management System you
may be using with your students. You have the embed code accessible for you, for the
purpose of this assignment – I just need to Control-C, copy the URL and submit it via
the drop box in Haiku.