SS

sio
4 PLAN A ROUTE
LEARN HOW TO ADD C0NTENT
FROM ANOTHER WEB PA GE

EMBED A MAP IN YoUR PAGE

USING A WEB API

USE AN API KEY

LEARN HOW THE <IFRAME

TAG WORKS

PLAN A ROUTE USING

GOOGLE MAPS

T
sSion Brief
iss

l
Dear Code,

You will be
pleased to hear that we have
journey. We are currently finally
lying low at a secret made it to Moscow after a long train
Mr Volkov to know
we've arrived location, as
in the we want
no one but
came to see us he's city with the Monk
Diamond.
-

a
charming man. I'm so
happy we've found his lost
Mr Volkov

Heand Professor Bairstone jewel.

have been
for the exhibition.
Your app has been extremely busy getting everything
according to plan. There is only one very helpful and so far everything is ready
going
haven't thought of: how do we thing that Professor Bairstone
safely transport the diamond from and Mr Volkov
to the House of
Volkov? our secret location

The Bond Brothers have been known to

expensive jewellery in daring heists. ambush and rob courier vans
I'm transporting
Encyclopedia so you can see what I mean.sending you an entry from the
We could Explorer's
ourselves, but Professor Bairstone is such a deliver the diamond to the
attention to famous figure I'm worried we will shop
ourselves and therefore the draw
exhibition plans.
We've decided that the best
thing to do would be for me to take the diamond to
nearby Gorky Park. Mr Volkov's head of the
we will take the
security will be waiting for me and
together
diamond to the House of Volkov, which is
Cathedral. Would right next to St Basil's
you be able to help us by planning a route
be really helpful to have a web page with a map embedded in it. It through the city?
It will
we got lost or were
would be terrible if
duped by the Bond Brothers into going the wrong way. Imagine if we
lost the Monk Diamond now!

Ihank you for

helping us again. Everything is so nearly ready. We've just had the
invitations for the exhibition printed and they are now ready to be sent to the guests.
I'm
sending you one too!
very best wishes from our city hideaway,
Dr Ruby Day
 The Bond Brothers' Robberies
From the Explorer's Encyclopedia, the guide to every adventure
THE ExPLORER Ss
For other jewel thieves,
ENCYCLOPEDIA see Famous Jewel Thieves.
The Guide to Every Adventure
The Bond the
Home page
Brothers' Robberies are the audacious jewel thefts carried du
gang of jewel thieves known as the e s tahe

Contents Bond Brothers. The majority

in their raids have never been seen again. Normally stolen
of the
jewellery is the
Featured discoveries
Famous expiorers Dlack market soon after theft, but the Bond Brothers
a e a top
Historical expeditions secret hiding place for are thought to Tid
their loot.
 A

11olhov reguests the pleusure

your conpay
at a
very special erhibition hosted by
the HousefTolhoo
21June at 7. O0p.m. at
on

the Rouse of Tolhoo, near to

S Basils Cathedral, Moscowr
ou are noited to meet, guests of honour
Lrofessor Bairstone, D» Day
and orvnest

and to hear about the sensational dhscovery

made on their recent expedition.

RSVP

members, who are krnown only by Light Fingers.

their allases:
I o W that the gang has three core

three members are aided by other smaller crooks, who help them
e Gem and Tony Twinkles. The
Choos and hide the stolen jewes
eir targets, make their escapes
One with access to government databases.
In all their robberies the COTV
gang is a skilled cvber-criminal,
of the crime.
Cemeras in the area disabled during the period
e are Surrounding the target are courier
the Bond Brothers have held up
smash-and-grab raids,
Slealing from expensive boutiques in as road workers and then used fake
VEn
Vans or motorcyc have disguised
themselves
OCycles delivering jewellery. They
s to direct the rivers into dead-end roads, before robbing them.
oad Signs
the same, making it very hard
Thereir success seems to be due to the way they vary
Seems
their tactics. No raid is
ever

for the
authorities to predict what they will do next
 CONTENT USING A WEB API
ADDING
lef's get coding! This l
Brief and know what Dr Day needs you to do, will
Now you ve read the Mission
three missions, but dont worry. he great thing ah.
be a bit different to what you've done in the other bout
use the Internet
is that you don t always have
have to do the lhard
the
learning how to build web pages or apps that
work yourselt.
It might sound a challenge to create a web

page with map embedded in it, but we don't

a

have to code the map from scratch. All we have to

do is write some code to call a URl on the Internet
that has the map we need. Programmers call this
oRD
WO,
When a new piece ot
content is inserted into
integrating one web page with another. an existing web page, we
When we want to integrate our web page with
say it has been EMBEDDED
another website, we have to write some code that
in the page. The embedded content
will connect our page to the web server that stores
becomes part of the page.
the other website. We can then acces the data and
content on that server that we need.

Web APIS
You already know what an APl is and have You can use web APls for lots of different things
used two of them in Mission 3: the DOM and when you're building a website. You might have
localStorage APls. Those APls let you access some come across some of these web APls on websites,
handy built-in functions. APls come in all shapes which help you do these things:
and sizes and the APl that we need to embed a
map in this mission is slightly different to those we
have used already. Add maps
APls used to integrate with other websites are Add Like or Share buttons for
sometimes called "web APls" or "web services".
Facebook
They let you access a website's built-in features and
functions, so
you can add extra content to Share videos on YouTube and Twitch
your
page without having to write lots of code.

138
 Web APls let everyone build etter and more
lev websites quickly and easily. To embed a Maps, which are run by Google and
Complex

We re
Microsot.
plan a route we are
going to use a going to learn how you can use Google
map
and map Maps to ind the best route for Dr
web APl
the House of Volkov's
and Day
There are several websites on the Internet that head of security. You ve
ef
you embed embed their maps on
your web pages. Most
probably used Google Maps before to look up an

ofthem even et you do it for free. The most popular address, but
program yourthis time
very own
youmap going
are and then learn how
to embed it into
free map web Pls are Google Maps and Bing
your web page.

Map web APIS

lo US the Google Maps web APl you have to register with Google and get a special piece of code
rnlled an API key. An API key is a special password that
your web page uses to access the Google Maps
APl on the Google server. It you don't use an APl key you won't be able to embed a map. You can get a
Google Maps APl key by visiting:

https ://developers .google.com/maps/documentation/embed/

An APl key is a long piece ot code made up

API key
ot letters and numbers. Every one is ditterent, Here is your API key
AT2aSyAZRTXOuvmj jKME mRYLATCZRq3S09x3XCK
but will look something like this:
OK

Did you know?

TOU need a Google account to get a Google
Maps API You have to be 13 years old
key. over
to have a Google account. If you are under 13, Turn over to tind
SK an adult it you can use their account with
out how to get your
their supervision, or if they can sign up on your own API key
sure you, or the adlt helping you,
,Make
v e read the terms and conditions. Go to

ww.support.google.com to find out more.

139
le r ith nermission.
 www MAPS
GETTING A GOOGLE
CODE SKILLS
API KEY
API key. You'll need it later
Let's learn how you can get a Google Maps
in the mission to create the route tor
Dr Day.
this link into your browser:
Start by going to the Google Maps APl website. Type

h t t p s : / / d e v e lopers.google.com/maps/documentation/embed/

2. Find the GET A KEY button. Click on it. G00gle Maps

3. You'll see a pop-up with three options. G n o g l e Maps APl3

Click CONTINUE. wepMaps Embed AP

oviRMEW

to your website Witn simple HiML

Bing the power of G00gie Maps
GoogleMaps

magey Urectio05

t e e r e bare maoi ad rdoor loor plans kdd Sveet View sod satelite ogery Acceas un by um rousng afic bace rn
n e neer f Gong

Jhepore

Go0gle Maps

Go ge APs

4. Now sign into a Google account. Remember

it you are under 13 you need to get an adult AOle ponoeuAn Googie A

to help you. You will be sent to the Google

Creste P
Developers Console. Make sure you (it you are
over the age requirement), or the adult helping
you, have read the terms and conditions. You
need to agree to them in order to proceed. Then
select Create a new project trom the drop-down
list and click Continue.

140
 will then be asked to create Google Haps
You
5. Don't till
an APl key. anythinga
Create.
in -

just click
AP1 A1 Maoger
Credentiala

ce

6. Your APl key will be displayed. It will

be a long code made up of numbers
and letters. They are all unique but it
will look a bit like this:
Google Maps

7. Now copy and paste your

APl key into your text-editing OK

program. Save your file in

your Coding folder as a text file
Use the extension .txt). Call your
new file APlkey.txt.

Keep your HPI

key sate as you'l
need. it later, in
the miSSion

Coder, take note

Some ot these steps
as Ooogle
might change
updates its sottware.

141
HOW TO EMBED CONTENT
we can start mel
an API key for Google Maps,
Now you know what embedding is and you've got King
our web page for Dr Day. We first need to learn
how to embed content from another website in ou
to learn some new HTML tags
and attributes.
page. lo do this we need

«/ifrarme»
The ifrane» tag: <ifrane> and
To add a Google Map to our page, we need to The first attribute you have to include is the
Use a new HTML tag called the <iframe> tag. source (src) attribute, which we used in Mission 1.
The is <iframe> and the closing tag
opening tag The source attribute tells your browser which piece
is </iframe >. The tag is used to create an inline of content you want to embed and is in the form of
tra me, which is a really useful way of embedding a URL. When you are integrating your website the
content trom another website in your page. You can intormation in the URL is very important for your
also use several attributes with the tag to change browser. Let's take a look at an example with the
the way your embedded content displays. Monk Diamond Discovery page:

<!DOCTYPE html>
<html>
<head>
<title>Di amond Discovery</title>
</head Source atribute
<body>
iframe <iframe src="https://www.monkdiamonddiscovery.com">
</iframe
</body>
URL
</html
ianond

The Monk Diamond Disc A small section of the

Monk Diamond Discovery web pu
that we
provided as a URL will appear embedded in
page. However if's quite hard to see the embedded page a yo
this smal size.
You need to include some
inside
other attribures
your opening <iframe> and
tag to change the size,shapetat all the
the
appearance of the embedded
page. Let's take look
aa look a
attributes you can use:

142
 Attribute name What does it do?
Examplevalues
Provides the URL for the
piece of content
src you want to embed
http://www.bing.com
http://www.bing.com
Sets the maximum width
width
of the <iframe» 600px; 20%
Sets the maximum
height
height of the
<iframe> 600px; 20%

Sets the width of the border around the

frameborder

<iframe Opx; 4px

Sets the style of the <iframe> using
style a CSS border: Opx
property and value
Now let's see how we can use all these attributes to change the appearance of our <iframe> and
embedded content. Remember you always have to add attributes inside your opening tag, like this:
Dianonde

<IDOCTYPE html>
<html>
The Monk Diamond Discov
<head>
<title>Diamond Discovery</title> StolenDiamandDisconerelin Siheria
Bursd Day hve masa mial dsxoy
bey hane ducovernd t Mmk I k a a n a e cav a s i r a

</head he m susects n the thefl wcTE de Bnd Brndcn

a das ph

<body Width attribute

<iframe
Frameborder
width="35@px" attribute
Height height="350px" Here we've set the width and height
otribute
frameborder= "epx" Style attribute attributes to the same number of
style="border : Opx"
pixels to make our <iframe> into
src="https://www.monkdiamonddiscovery.com"
a square. The frameborder attribute
</iframe> and the CSS border property have
/body> both been set to 0 pixels. This is so

</html> the <iframe> will blend into the

do this with
Useful thing, this page. You normally
an

<iframe> Tag <iframe», so that the embedded

content looks like it is part of
your page.

143
 Mwwww USING THE <IFRAME> TAG
CODE SKILLS

and how it works, let's have a

Now you've read about the <iframe> tag go
the way a piece embedded
of
at using the tag and its attributes to change
content displays in a web page.

1. Open up your text-editing program. Create a 3. Finally add the source atribute. Set its value to

new HTML file called iframe.html. Add the the URL of your favourite website, like this:
opening and closing <iframe> tags to the
<body> of your page, so the code in your new <iframe
file lookslike this: width="35@px"
height="35@px"
<!DOCTYPE html> frameborder="px"
<html> style="border: 0px"
<head> src="https://www.bing.com">
<title>iFrames</title> </iframe>
</head>
<body> 4. Save your HTML file and open it in your
<iframe browser. Your chosen site will be
</iframe> embedded in your web page.
</body> Now try changing the height and
</html> width of your <iframe> and seeing what
t does to the embedded content.
2. Now set the attributes of your <iframe>. Include
the width, height, frameborder and style attribute
inside your opening <iframe> tag, like this:

<body>
<iframe
width="35@px"
really like this
way of embedding
height="358px"
new content in
frameborder= "@px"
our page.
style="border: apx"
</iframe>
</body

144
 MBEDDING
GAGOOGLE MAP
the <iframe> tag is
Asyou
can see, really useful search. You use a
let's learn n o w how we can integrate a Google Google API called the Google
it. The simplest kind of Maps Embed API. When the user the APl a gives
into our page using
Map
add is called keyword, such as the name of a country, city or
oogle Map you
can an embedded street, it will
produce a map based on that keyword.

VRLS
T Google Maps Embed APl needs you to
provide it with a URL in the source attribute of your
oame>, The URL has to contain several important pieces of information so the correct map is
amhedded. Let's have a look at exactly what intormation we need to include in a URL if we want
to embed a map ot Moscow in our web page:
API key
https://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY

Path Search APl function Query string parameters

The first part of the URL is the path to the Google

Maps Embed API. You then have to tell that APl
Wo

RDS A STRING is a piece of data

in the form of a sequence of

wnat built-in tunction you want to use. We want to

characters. Strings can be made

USe the search APl function on the Google server, up of words and numbers.
S0 we add that to the URL. The next piece ot A PARAMETER is another name for a piece of
information, or an argument, that is passed
normation is the specitic part of our request,
to a function so it can perform an action.
called the query string parameters

STring paraneters
so the Google server is able to
in certain way,
The string parameters are the parts of a URL
that a
variables. The twwo
access
intormation stored in our

Contain ariables information that

the pieces of parameters are the key
parts ot the query string
depend on the user. In our example there are two
and the value. You
need both ot these parts for
are
rameters. The two variables a r e the map we to work. lurn o v e r to s e e the URL
your parameters
ching for (Moscow) and our unique API key. for the map of
Moscow.
We have to structure our query string parameters

145
 nttps://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY

UL J U
Key Value Key Value

Ihe first is the query key and th.

an ampersand (&). the
URL the two parameters are separated by
In this
this importantinformati
because they contain
the API key. Your browser needs them both ion.
second is

Parameter key What does it do? Example value

Gives the location you want to search

tor Moscow; London
needed to the
Gives the APl key access
APL-KEY
key Google server

The Google Maps Embed APl needs these two

MOscow
parameters to find the map we want to embed and
then to integrate it into our page. Let's see what
happens if we use these two parameters in our URL Koroiyo -
and set it as the source attribute tor our <iframe>. Mytshcm

When we save our tile and open it in our browser, we

will see a map of Moscow embedded in our page. noure

ano-joe
pacwo

<!DOCTYPE html>
<html>
So9co
<head> MOCRO

<title>Moscow</title> 4APP

</head> yuberty

<body> A

<iframe
width="45@px"
height="450px" wronna

frameborder="@px"
style="border: 0px"

</iframe>src="https://www.google.com/maps/embed/v1/search?q=Mos cow&key=API-KET
</body>
</html>

146
 ww MM
CODE SKILLS EMBED A GOOGLE MAP

rembed a Google Map tor Moscow in

her before
a
It's an important skill
page. to
we plan our route tor Dr
Day and the head of security.
Open up your texf-edifing program. Create a 2. Now add the
HTML tile called width, height, frameborder and
w
citymap.html. Then copy
style atributes inside your opening <iframe>
ond paste your code trom itrame.html into
tag. Set the values, like this:
vOur new file. Modity it so that it looks like this:

<body>
DOCTYPE html>
<iframe
<html>
<head>
width="450px"
height="450px"
title>City Map</title> frameborder="@px"
</head style="border: epx"
<body> </iframee>
<iframe> </body»
</iframe>
</body>
/html>
3. Add the source attribute inside your opening <iframe> tag. Use the Google Maps Embed API URL and
add the two parameters. Set the parameter "q" to the location you want tor your map and the parameter
Key to your unique API key that you got earlier in the mission. Your source attribute will look like this:

cityMap
<iframe
width="45@px"
height="45@px"
trameborder="epx"
style="border: 0px
rc="https ://www.google.com/maps/embed/
V/ search ?q=Mos cow&key=API -KEY">

/iframe
it in your browser.
ave your HTML file and open
in your page.
TOU will see your map embedded

147
PLAN A ROUTE USING GOOGLE MAPS
We need to use the directions function,rrather
Now we know how to embed a map in our page,
we can start planning the route Dr Day and the than the search function. The directions function will
create a map that gives a route froma specified
head of security need to take through Moscow
To do this, we need to build a new URL and usea location lo another specitied location. Dr Day
need
new function in the Google Maps Embed API. We to take the Monk Diamond from Gorky Park to s
have to create our URL in a slightly different way. Basil's Cathedral, so our new URL will look like this
thit

Directions API function

Path
String parameters
https://www.google.com/maps/embed/v1/directions? L

origin=GorkyPark, Moscow&destination=StBasil,Moscow&key=API-KEY

Like
the
before, the
first part of
APl function.
our URL is the path to the Google Maps Embed API.
We then request to use
directions Then we use three parameters: the origin, destination and API key. For the
origin and destination you can put lots of diferent
values, but the simplest thing to do is put the place
name tollowed by the city These two
name. new keys are important tor your browser as they provide the
following intormation:

Parameter key What does it do? Example value

Gives the place you want your
origin route to start GorkyPark, Moscow
Gives the place you want your
destination
route to end StBasil,Moscow

Did you notice?

We've included the name of the cant wait to
site and the city, separated by a See St Basil's
comma G). There is no space atter
the comma. Cathedral

148
 JAournew URL
let'sadd
URL to our source
our n e w
atribute and see the
route Dr Day and the
to toke
through Moscow head of security need
!DOCTYPE html>
<html>
<head>

<title>Top Secret Route</title>

</head>

<body>
<iframe
width="65@px"
height="65@px"
frameborder="Opx"
style="border: epx"
src="https://www.google.com/maps/embed/v1/directions?
origin=GorkyPark, Moscow&destination=StBasil, Mos cow&key
API-KEY">
</iframe>
</body>
</html> Top Secret

Meco o

STRICT

This is exactly
what Dr Day needs
the Monk
to et
Diamond sately
to the House of
Volkov

149
 YOURSELF TASK
ion DO IT
PLAN A ROUTE

web APl and Google Maps to emhod

Great work! You've learnt how to use a
new knowledge
fo plan a route throunh
content in your page. Now use your
a route will help
Moscow, from Gorky Park to St Basil's Cathedral. Having
Dr Day keep the Monk Diamond sate.

MOscow Route Planning Brief

When you plan your route, use your new Code Skills to do the tollowing things:

Use an API key: use the Google Maps Embed APl to get an API key.
Create an <iframe>: use this new HTML tag so you can embed content
in your page.

Change the way your <iframe» displays: use atributes to change the
height, width and borders of your <iframe>.
U s e the source attribute: embed a URL that will connect to the web API
you need.

Use the Google Maps Embed APl: create a Google Map using the
Google API.
Use the built-in direction function: plot a route using this function.
Set query string parameters: give the destination function the origin and
destination tor your route.
Save your file in your Coding tolder and call it route.html.

150
<!DOCTYPE html>

<html>

<head>

title> Top Secret Route</title

. Don't torget to
use your Saved

</heads
API key
<body>
iframe
width="100@px"
height="100@px"
frameborder="@px"
style="border: Bpx"
src="https ://wwW.google.com/maps/embed/v1/directions?
origin=GorkyPark, Moscow&destination=StBasil, Mos cow&key=API -KEY">
</iframe
/body>
/html>
FUTURE CODE SKILLS
Knowing how to use web APls means you can easily include
teatures rom other apps or websites in your code. You can use
them to build pages and apps that use big web services, such
This is what your
as social networks like Facebook or Instagram, or utilities like
tinished. cod.e will Google Maps or Dropbox. This will save you time and stop
look like!
you having to code functions from scratch.

This route will stop

the Bond. brothers
and. keep the Monk
Diamond safe.

151