Tutorial #1
Embed a Google Map Basic   2013-10-31

Introduction

Displaying a Map on a web page is one of the most common uses of a third party web service.

Google Maps is one of the leading map services and offers a developer tremendous flexibility in how they display maps.

I will be covering some of these features in later tutorials, but this one is going to start things off with the easiest way to get a functional map into your web page.

The end result will look something like this:

Screenshot of Demo


Step by Step

1: Go to Google Maps and go to the location you are interested in - by entering the address, for example

2: Click on the 'Link' button in the left hand panel (it looks like three links of a chain) to bring up a popup with links to the map that you can cut and paste.

Screenshot 1

3: Click 'Customize and preview embedded map' to see what your map will look like and select your preferred size.

Below the map is a block of HTML text. Select and copy all of this

Screenshot 2

4: Go to your target web page in your text editor and paste that text into the appropriate place on the page.

Load your page into a browser and it should display the map


Understanding the Code

Here is that block of code with added newlines to make it easier to read

The first line is an iframe that takes its content from the src URL at Google Maps.

That long URL consists of https://maps.google.com/maps followed by a series of key=value pairs, separated by the Ampersand character (&), which here is escaped as &.

Using this as the src for the iframe renders the map in that container. You can ignore most of the key/value pairs but these two are critical:

ll=48.858228,2.294388 specifies the Latitude and Longitude of the target location.

spn=0.006295,0.006295 specifies the Area around that point that is shown. In essence, this represents the zoom level.

Try changing those values slightly in your editor (e.g. change the last 2 or 3 digits for the numbers), reload the page and see what happens.

The second long line is similar to the first, but here it is the target for a link that will take you to a regular Google Maps page, centered on the same location.


Code for this Tutorial


Share this tutorial


Related Tutorials

10 : Embed a Bing Map   (Basic)

15 : Display a Google Map using JavaScript   (Intermediate)

42 : Google Street View Image API   (Basic)


Comment on this Tutorial


comments powered by Disqus