ADDING CONTENT USING A WEB API: It might sound challenging to create a web page with a map embedded in it, but we don’t 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 integrating one web page with another. When we want to integrate our web page with another website, we have to write some code that will connect our page to the web server that stores the other website. We can then access the data and content on that server that we need.
When a new piece of content is inserted into an existing web page, we say it has been EMBEDDED in the page. The embedded content becomes part of the page.
You already know what an API is and have used two of them earlier: the DOM and localStorage APIs. Those APIs let you access some handy built-in functions. APIs come in all shapes and sizes and the API that we need to embed a map in this assignment is slightly different to those we have used already. APIs used to integrate with other websites are sometimes called “web APIs” or “web services”. They let you access a website’s built-in features and functions, so you can add extra content to your page without having to write lots of code.
You can use web APIs for lots of different things when you’re building a website. You might have come across some of these web APIs on websites, which help you do these things:
Web APIs let everyone build better and more complex websites quickly and easily. To embed a map and plan a route we are going to use a map web API. There are several websites on the Internet that let you embed their maps on your web pages. Most of them even let you do it for free. The most popular free map web APIs are Google Maps and Bing.
Maps, which are run by Google and Microsoft. We’re going to learn how you can use Google Maps to find the best route. You’ve probably used Google Maps before to look up an address, but this time you are going to learn how to program your very own map and then embed it in your web page.
Map web APIs
To use the Google Maps web API you have to register with Google and get a special piece of code called an API key. An API key is a special password that your web page uses to access the Google Maps API on the Google server. If you don’t use an API key you won’t be able to embed a map. You can get a Google Maps API key by visiting:
An API key is a long piece of code made up of letters and numbers. Every one is different, but will look something like this:
You need a Google account to get a Google Maps API key. You have to be over 13 years old to have a Google account. If you are under 13, ask an adult if you can use their account with their supervision, or if they can sign up on your behalf. Make sure you, or the adult helping you, have read the terms and conditions. Go to
www.support.google.com to find out more.
GETTING A GOOGLE MAPS API KEY
Let’s learn how you can get a Google Maps API key.
1) Start by going to the Google Maps API website. Type this link into your browser:
2) Find the GET A KEY button. Click on it.
3) You’ll see a pop-up with three options. Click CONTINUE.
4) Now sign into a Google account. Remember if you are under 13 you need to get an adult to help you. You will be sent to the Google Developers Console. Make sure you (if 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 from the drop-down list and click Continue.
5) You will then be asked to create an API key. Don’t fill anything in – just click Create.
6) Your API 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:
Keep this code safe. It is a unique key to access the Google maps API.
DON’T PRINT KEY
DON’T STORE KEY IN A FILE
Only access online as needed from a secure node.
HOW TO EMBED CONTENT
Now you know what embedding is and you’ve got an API key for Google Maps, we can start making our web pages with these new add-ons. We first need to learn how to embed content from another website on our webpage. To do this we need to learn some new HTML tags and attributes.
The < iframe > tag: < iframe > and < /iframe >
To add a Google Map to our page, we need to use a new HTML tag called the < iframe > tag. The opening tag is < iframe > and the closing tag is < /iframe >. The tag is used to create an inline frame, which is a really useful way of embedding content from another website on your page. You can also use several attributes with the tag to change the way your embedded content displays.
The first attribute you have to include is the source (src) attribute, which we used earlier. The source attribute tells your browser which piece of content you want to embed and is in the form of a URL. When you are integrating your website the information in the URL is very important for your browser. Let’s take a look at an example: multiple
<!DOCTYPE html> <html> <head> <title>Hello multiple worlds...</title> </head> <body> <iframe src="https://www.google.com"> </iframe> </body> </html>
A small section of Googles web page that we provided as a URL will appear embedded in your page. However, it’s quite hard to see the embedded page at this small size. You need to include some other attributes inside your opening < iframe > tag to change the size, shape and appearance of the embedded page. Let’s take a look at all the attributes you can use:
|Attribute name||What does it do?||Example values|
|src||Provides the URL for the piece of content
you want to embed
|width||Sets the maximum width of the < iframe >||600px; 20%|
|height||Sets the maximum height of the < iframe >||600px; 20%|
|frameborder||Sets the width of the border around the < iframe >||0px; 4px|
|style||Sets the style of the < iframe > using a CSS property and value||border: 0px|
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:
<!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <iframe width="350px" height="350px" frameborder="0px" style="border: 0px" src="https://www.miltonmarketing.com"> </iframe> </body> </html>
Here we’ve set the width and height attributes to the same number of pixels to make our < iframe > into a square. The frameborder attribute and the CSS border property have both been set to 0 pixels. This is so the < iframe > will blend into the page. You normally do this with an < iframe >, so that the embedded content looks like it is part of your page.
USING THE < IFRAME > TAG
Now you’ve read about the < iframe > tag and how it works, let’s have a go at using the tag and its attributes to change the way a piece of embedded content displays in a web page.
1) Open up your text-editing program. Create a new HTML file called iframe.html. Add the opening and closing < iframe > tags to the < body > of your page, so the code in your new file looks like this:
<!DOCTYPE html> <html> <head> <title>iFrames</title> </head> <body> <iframe> </iframe> </body> </html>
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="350px" height="350px" frameborder="0px" style="border: 0px"> </iframe> </body>
3) Finally, add the source attribute. Set its value to the URL of your favourite website, like this:
<iframe width="350px" height="350px" frameborder="0px" style="border: 0px" src="https://www.miltonmarketing.com"> </iframe>
4) Save your HTML file and open it in your browser. Your chosen site will be embedded in your web page. Now try changing the height and width of your < iframe > and seeing what it does to the embedded content.
EMBEDDING A GOOGLE MAP
As you can see, the < iframe > tag is really useful. Let’s learn now how we can integrate a Google Map into our page using it. The simplest kind of Google Map you can add is called an embedded search. You use a Google API called the Google Maps Embed API. When the user gives the API a keyword, such as the name of a country, city or street, it will produce a map based on that keyword.
The Google Maps Embed API needs you to provide it with a URL in the source attribute of your < iframe >. The URL has to contain several important pieces of information so the correct map is embedded. Let’s have a look at exactly what information we need to include in a URL if we want to embed a map of Moscow in our web page:
The first part of the URL is the path to the Google Maps Embed API. You then have to tell that API what built-in function you want to use. We want to use the search API function on the Google server, so we add that to the URL. The next piece of information is the specific part of our request, called the query string parameters.
A STRING is a piece of data in the form of a sequence of characters. Strings can be made up of words and numbers. A PARAMETER is another name for a piece of information or an argument, that is passed to a function so it can perform an action.
The string parameters are the parts of a URL that contain variables – the pieces of information that depend on the user. In our example, there are two parameters. The two variables are the map we are searching for (Moscow) and our unique API key. We have to structure our query string parameters in a certain way, so the Google server is able to access information stored in our variables. The two parts of the query string parameters are the key and the value. You need both of these parts for your parameters to work. Turn over to see the URL for the map of Moscow.
In this URL the two parameters are separated by an ampersand (&). The first is the query key and the second is the API key. Your browser needs them both because they contain this important information:
|Parameter key||What does it do?||Example value|
|q||Gives the location you want to search for||Moscow; London|
|key||Gives the API key needed to access the
The Google Maps Embed API needs these two 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 and set it as the source attribute for our < iframe >. When we save our file and open it in our browser, we will see a map of Moscow embedded in our page.
<!DOCTYPE html> <html> <head> <title>Moscow</title> </head> <body> <iframe width="450px" height="450px" frameborder="0px" style="border: 0px" src="https://www.google.com/maps/embed/v1/search?q=Moscow&key=API-KEY"> </iframe> </body> </html>
PLAN A ROUTE USING GOOGLE MAPS
Now we know how to embed a map on our page, we can start planning the route the user will take through Moscow. To do this, we need to build a new URL and use a new function in the Google Maps Embed API. We have to create our URL in a slightly different way.
We need to use the directions function, rather than the search function. The directions function will create a map that gives a route from a specified location to another specified location. Our new URL will look like this:
Like before, the first part of our URL is the path to the Google Maps Embed API. We then request to use the directions API function. Then we use three parameters: the origin, destination and API key. For the origin and destination, you can put lots of different values, but the simplest thing to do is put the place name followed by the city name. These two new keys are important for your browser as they provide the following information:
|Parameter key||What does it do?||Example value|
|origin||Gives the place you want your
route to start
|key||Gives the place you want your
route to end
We’ve included the name of the site and the city, separated by a comma (,). There is no space after the comma.
Knowing how to use web APIs means you can easily include features from other apps or websites in your code. You can use them to build pages and apps that use big web services, such as social networks like Facebook or Instagram, or utilities like Google Maps or Dropbox. This will save you time and stop you having to code functions from scratch.