GetDotted Domains

Viewing Thread:
"Adding a Google Map of your location to your web site"

The "Freeola Customer Forum" forum, which includes Retro Game Reviews, has been archived and is now read-only. You cannot post here or create a new thread or review on this forum.

Sun 25/11/07 at 22:54
Regular
"It goes so quickly"
Posts: 4,083
[B][U]Adding a Google Map of your location to your web site[/U][/B]

Freeola host many a web site, and some of those web sites include maps and directions to specific locations. Is your web site one of those? If so, why not let Google do most of the work, by including a Google Map on your site that shows the world where you are.

This is a very basic introduction to using a Google Map on your own web site, and assumes the reader is familiar with HTML, and has at least a very basic understanding of JavaScript.

While knowledge of JavaScript isn’t strictly necessary to include a Google Map (as the examples can generally be copied and pasted, with only slight changes), you may find some of the article a little confusing at first if you are unfamiliar with it. You will certainly be required to understand JavaScript if you plan on taking the use of Google Maps further, but that won’t be covered within this article.

Before adding a map, be sure that the location needs to be highlighted online. It’s not recommended to plot your own house, without good reason, and certainly don't plot your ex-girlfriends house inviting all sort of people around as some sort of revenge, because that’s just mean.

So, without further delay ... lets get started!

What will I need?

All you’ll need is a Google account, which if you have a Gmail account, is already taken care of. Once done, all you have to do is get an API key, which involves you entering the domain name of the site you’re going to use a Google Map on, and including this API key when calling the Google Maps API from within your web sites HTML mark-up.

Unlike other Google services, Maps currently don’t include any advertising, so you really are getting it for nothing, though they do mention that if this policy changes, they will give 90 days notice on the Google Maps API Blog.

You will also need a web site, and somewhere to plot, such as your place of business, or an activity you’re planning.

How it works!

Google Maps is a rather complex JavaScript file that lets you alter the look and feel of a map on your web site by including specific settings. The actual file is hosted on Google's own servers, and you do not need to download it. You simply need to reference it from within your HTML mark-up.

The API will alter your web sites HTML in a manor that is too complex to try and explain here. All that you need to worry about is issuing your preference settings, and let Google take care of the rest.

Building up our example!

The example within this article is going to be the location of Freeola HQ, so when plotting your own location, be sure to substitute in your own relevant information. As this article assumes some HTML knowledge, lets just get in to it!

Getting a map to show up on your web page!

We’ll start with a bare bones HTML page, cutting out page content in order to keep things simple. The code below is an HTML web page with a title and heading of Freeola Broadband, and two paragraphs of text:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<p>It is pretty great!</p>
</body>
</html>


Example 1

While it may not look exactly like your own web site’s code, its structure is similar to any other web page on the web.

The first thing that needs to be done to get a Google Map on your web page is for you to reference Google’s JavaScript file within your web pages <head> element, using the <script> element, such as:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
[B]<script type="text/javascript" src="http://maps.google.com/maps?file=api [U]SPACE[/U] &amp;v=2.x&amp;key=[U]yourAPIkey[/U]"> </script>[/B]
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<p>It is pretty great!</p>
</body>
</html>


Example 2

… though when doing so yourself, be sure to replace [B][U]yourAPIkey[/U][/B] with the one Google issued you when you signed up. If you include the wrong API Key, you’ll see this alert. Also ensure you remove the [B][U]SPACE[/U][/B] from the code, as this is only there because of the forum character limit imposed by Freeola.

Next up, you will need to include an HTML element that Google can place the map in too, and assign it a unique ID. This can be done with a variety of HTML elements, but the easiest, and perhaps most common, is to use a <div> element with an id attribute value of “map”, placed within the area that you wish the map to appear. In this example, we’ll place it under the first paragraph, like so:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
[B]<div id="[U]map[/U]"></div>[/B]
<p>It is pretty great!</p>
</body>
</html>


Example 3

If you view the source code of many web sites that use a Google Map, you’ll find they’ve stuck with the code supplied by Google, but that doesn’t have to be the case. The important aspect is the id attribute, and that the element is a “block-level element”. If you’re unsure what this means, don’t worry, just use the <div> element, which is a “block-level element” by default.

You will then need to include a width and height CSS setting within the <div> element. In our example, we’ll chose a width of 500 pixels, and a height of 400 pixels:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map" [B]style="width: [I]500px[/I]; height: [I]400px[/I];"[/B]></div>
<p>It is pretty great!</p>
</body>
</html>


Example 4

You can also place content within the specified <div> element if you wish, and this will be displayed if the Google Map cannot, for example, using the sample code:

[B]<div id="[U]map[/U]"><p>No map for you.</p></div>[/B]

... users who’s web browser can’t use a Google Map would see the text “No Map for you.”. If you decide to do this, ensure the content is a bit more useful than this example shows.

Now that we’ve defined our HTML element that the map will be placed in, we then need to tell Google Maps about it. We’ll do this using a JavaScript function named loadmap. This will also need to be placed within your web pages <head> element, using a separate <script> element, such as:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
[B]<script type="text/javascript">
[I]// Map settings go within this function.[/I]
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById [B][U]SPACE[/U][/B] ("[U]map[/U]"));
[I]// Settings for your Google Map must go here[/I]
}
}
</script>[/B]
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map"></div>
<p>It is pretty great!</p>
</body>
</html>


Example 5

Be sure to remove the [B][U]SPACE[/U][/B].

The loadmap function is where you will place your settings that the Google Maps API will read and interoperate into a map on to the screen.

Already within that function is a “conditional statement” or an “if statement”, which checks if the web browser can handle Google Maps. You’ll have to include the map settings within this “if statement”, otherwise you may see some problems. If the web browser can’t handle Google Maps, nothing happens within this “if statement”.

Also already within the function is some code that creates a JavaScript variable that latches on to the HTML element you want your map to be drawn in. If you decide upon a different id value, you will need to also change the value within the last part of this code. For example, if you decide to use the HTML code:

<div id="[B]MyGoogleMap[/B]"></div>

… you will need to ensure the last part of the variable code is altered so it also has the same value, such as:

var map = new GMap2(document.getElementById [B][U]SPACE[/U][/B] ("[B]MyGoogleMap[/B]"));

Note that the var map bit is not changed, only the end of the code.

As the Google API file needs to allow a little time for the HTML page to load up, the loadmap function won’t run right away, so you’ll need to include an event handler within the <body> element, which allows the web browser to tell Google Maps when it’s ready for the loadmap function to get going:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
<script type="text/javascript">
// Map settings go within this function.
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
// Settings for your Google Map must go here
}
}
</script>
</head>
<body [B]onload="loadmap()" onunload="GUnload()"[/B]>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map"></div>
<p>It is pretty great!</p>
</body>
</html>


Example 6

The GUnload function is part of the Google API, and is included to ensure the users web browser properly clears its internal memory when the Google Maps page has been closed.

Structure is set, time for the painting!

Now that a Google Map has been defined and included, it’s now time to issue your preferred settings for the map, as currently, all you can probably see is a grey box with a Google logo in to bottom left, and a Terms of Use link in the bottom right. If you don’t, then go back over the code samples above, and see what you’ve missed.

From this point, the general HTML shown above will not be included in the code samples, as all the settings will need to go within the loadmap function, in place of the [I]// Settings for your Google Map must go here [/I] comment.

Also note that if you have changed the variable name created when using the var [B]map[/B] code to something else, be sure to use that new variable name where map. is used in the examples below.

Pin-pointing your location, and centring the map around it!

The map has been included on your web site, but now needs to be told which area you wish to show, as well as the level of zoom you want to apply. This is done using Google GLatLng([B]latitude[/B], [B]longitude[/B]) method, which requires the latitude and longitude coordinates of your chosen location. We’ll create a variable called points to store these, as we’ll be using them again later.

You’ll then need to use the Google method map.setCenter(points, [B]zoom[/B]) which will load up the location in to your map centre, then apply the desired zoom setting, which can be anything between 0 and 19 (depending on map availability). In the Freeola example, we’ll use the zoom level of 15:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
[B]var points = new GLatLng([I]51.87959068066881[/I], [I]0.5628638931274414[/I])
map.setCenter(points, [I]15[/I]);[/B]
}
}
</script>


Example 7

Don’t know how to find your coordinates? Try finding your area on the Where Am I map, and click on your desired location. You should see an info bubble pop up with the code that you can copy and paste in to your web page, though you may want to alter the zoom level.

Setting the type of map you see!

Google Maps currently offer three main type of design layout to choose from, which are “Map” (drawing), “Satellite” (photos) and “Hybrid” (drawing on top of photos). By default, you’ll see the “map” layout, and so if you wish to use this map type, you do not need to include any specific settings.

Altering the map type is done using the method map.setMapType([B]type[/B]), and then including the preferred [B]type[/B] within the parentheses (these curvy brackets). This is defined using pre-set values (created by Google), which can either be:

* [I]G_NORMAL_MAP[/I] – for a drawing type map (default).
* [I]G_SATELLITE_MAP[/I] – for a satellite image map.
* [I]G_HYBRID_MAP[/I] – for a mix of the two.

In this example, we’ll use the “Hybrid” map type, so would need to include map.setMapType([I]G_HYBRID_MAP[/I]) within our code, such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
[B]map.setMapType([I]G_HYBRID_MAP[/I]);[/B]
}
}
</script>


Example 8

One important factor to consider is the type of satellite photos available for your chosen location. If the imagery is blurry, or not very detailed, it is probably best to stick with the default map drawing design.

Marking your territory!

Now that you’ve zoomed in to your area, and selected your map type, you’ll want to include a marker icon to pin-point your location to your web site visitors. Google include a basic marker icon that you can use for this purpose, and all that it requires is the points variable which is holding your coordinates. This is done using two lines of code, one to define the markers location, the second to add it to the map:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
[B]var [U]marker[/U] = new GMarker(points);
map.addOverlay([U]marker[/U]);[/B]
}
}
</script>


Example 9

The first line of code creates another variable, called marker, which then creates the marker icon in the correct position. The second line then places the marker on to the map. The reason we don’t condense this in to a single line of code (such as map.addOverlay(new GMarker(points));) is because we can then use the marker variable again to cause the marker to become clickabe, which we will look at a little “later on”.

Adding additional map controls!

To make using the map easier for your visitors, you may want to add the option for your users to zoom in and out of the map, as well as selecting the type of map that they can see. This can be done with the map.addControl([B]type[/B]) method.

The available options (or type values) for defining these map controls are:

* [I]new GLargeMapControl()[/I] – full zoom and directional arrows.
* [I]new GSmallMapControl()[/I] – small zoom and directional arrows.
* [I]new GSmallZoomControl()[/I] – small zoom only.

So, if you only wanted to include a small zoom only control, you would select the third value, and place that within the map.addControl([B]type[/B]) method, such as map.addControl([B]new GSmallZoomControl()[/B])

The code to include map type selection is just a single option of [I]new GMapTypeControl()[/I], and needs to be placed within a separate map.addControl([B]type[/B]) method.

In our example, we’ll include a full map control, and the map selection menu, which can be easily done with two lines of additional code:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
[B]map.addControl([I]new GLargeMapControl()[/I]);
map.addControl([I]new GMapTypeControl()[/I]);[/B]
}
}
</script>


Example 10

In the first line, we’ve added the large map control, which includes the zoom scale bar and directional controls. In the second line, we’ve included the map type selection menu. If you don’t want this selection menu, then don’t include the second line of code.

Letting the user see the scales!

You may also want to include a scale bar, which appears beside the Google logo in the bottom right, and can be added, using another map.addControl([B]type[/B]) method, with a value of [I]new GScaleControl()[/I]:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
[B]map.addControl([I]new GScaleControl()[/I]);[/B]
}
}
</script>


Example 11

Overview window!

One final control you may wish to add is a small overview map in the bottom right corner, which indicates the location of the main map within a blue box, hovering over a zoomed out section of the current location. Again, this is included via the map.addControl([B]type[/B]) method, with a value of [I]new GOverviewMapControl()[/I], such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
[B]map.addControl([I]new GOverviewMapControl()[/I]);[/B]
}
}
</script>


Example 12

The default size of this control is 120 pixels, both width and height, but if you find that the size of this window is too big / small, you can use the GSize([B]width[/B],[B]height[/B]) method inside the GOverviewMapControl() method to define your own sizing. In our example, we’ll make the width 150 pixels, and the height 200 pixels:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl([B]new GSize([I]150[/I],[I]200[/I])[/B]));
}
}
</script>


Example 13

Making your marker in to an information bubble!

As mentioned earlier, we created a marker variable so that it may become clickable “later on”, and now that we’ve reached this “later on”, we can go ahead and get clicking.

To cause the marker icon to become clickable, and display an information bubble, you’ll need to create a function that refers to the marker variable, and includes the text you wish to appear, such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl(new GSize(150,200)));

[B]GEvent.addListener([I]marker[/I], "click", function() {
var text = "Freeola!";
map.openInfoWindow([U]points[/U],text);
});[/B]
}
}
</script>


Example 14

You’ll see that we’ve again created a new variable, with the text “Freeola!” as the value. We then reference this variable within the map.openInfoWindow() method, so that Google Maps knows what to show within the information bubble. We’ve also again referenced the points variable, so that the info bubble appears where the marker is positioned.

However, that can appear a little bland, so Google also include an HTML capable information bubble, which is created using the map.openInfoWindow[B]Html[/B]() method. This info bubble looks the same as the one before, but allows you to use HTML mark-up within it, enabling you to create a more creative info bubble.

For our Freeola example, we’ll include a little more information, plus Freeola’s Logo. When including HTML, be sure to escape any quotes that may cause a problem, such as the ones used when creating HTML attributes.

Within JavaScript, you can add extra info to a variable using =+, as is used in the example below to include the Freeola logo, address, phone & fax numbers and web link:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl(new GSize(150,200)));

[B]GEvent.addListener(marker, "click", function() {
var text = "<img src=\"http://freeola.com/freeola.gif\" width=\"140\" height=\"48\" alt=\"Freeola\"><br>";
text += "92-102 East Street<br>";
text += "Braintree<br>";
text += "Essex<br>";
text += "CM7 3JW<br>";
text += "<strong>Sales &amp; Support:</strong> 0871 210 9977<br>";
text += "<strong>Fax:</strong> 0871 210 9988<br>";
text += "<strong>URL:</strong> <a href=\"http://freeola.com\" >http://freeola.com</a>";
map.openInfoWindowHtml(points,text);
});[/B]
}
}
</script>


Example 15

When users click the marker icon, they are shown the information box, complete with HTML mark-up formatting.

Take it from here!

This article was a very gentle introduction in how to add a Google Map to your web site, plotting a single location, as a method for allowing your visitors to locate you and your business. Google offer a wider range of options which enable you to use and manipulate their maps in a variety of ways, so if your needs are greater that what you’ve just read, check out the Google Maps documentation, or have a browse of the Google Maps API Group.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.
Sun 18/01/09 at 14:36
Regular
"It goes so quickly"
Posts: 4,083
Thanks streetview99, glad to hear you've found it to be useful.
Wed 14/01/09 at 23:50
Regular
Posts: 1
Best simple Google map tutorial I've ever seen. Damn good. Thanks
Mon 26/11/07 at 17:21
Regular
"It goes so quickly"
Posts: 4,083
Hi Hmmm...,

I hadn't noticed your longitude / latitude finder, but it works well.

I did noticed that until a couple of months ago Google's satellite photos were lacking compared to Microsoft's, though they seem to have caught up, and is come cases overtaken them recently.

Hmmm...:
"On MS Live Search my page is currently 6th out of 46,600,000 results!".

Your result came up 2nd place when I just searched, well done!
Mon 26/11/07 at 08:55
Moderator
"Are you sure?"
Posts: 5,000
Hi cjh,
Very interesting.
I hope it was my recent longitude/latitude post [URL]http://chat.freeola.com/Web-Development-4-chat/Webmaster-Tips-2798.html[/URL] that inspired you!

NB. It's worth checking your chosen location on maps.google.com and maps.live.com (the Microsoft offering) as out of town places are often captured better by Microsoft - so check the imagery first and choose the one that has the best aerial shots.

Adding a Microsoft map mashup is pretty similar to Google but the nice thing is you don't need to register for an API Key for each website - they just let you create your maps.


Off-topic
On MS Live Search my page is currently 6th out of 46,600,000 results! for finding longitude latitude


Hmmm... longitude latitude
Sun 25/11/07 at 22:54
Regular
"It goes so quickly"
Posts: 4,083
[B][U]Adding a Google Map of your location to your web site[/U][/B]

Freeola host many a web site, and some of those web sites include maps and directions to specific locations. Is your web site one of those? If so, why not let Google do most of the work, by including a Google Map on your site that shows the world where you are.

This is a very basic introduction to using a Google Map on your own web site, and assumes the reader is familiar with HTML, and has at least a very basic understanding of JavaScript.

While knowledge of JavaScript isn’t strictly necessary to include a Google Map (as the examples can generally be copied and pasted, with only slight changes), you may find some of the article a little confusing at first if you are unfamiliar with it. You will certainly be required to understand JavaScript if you plan on taking the use of Google Maps further, but that won’t be covered within this article.

Before adding a map, be sure that the location needs to be highlighted online. It’s not recommended to plot your own house, without good reason, and certainly don't plot your ex-girlfriends house inviting all sort of people around as some sort of revenge, because that’s just mean.

So, without further delay ... lets get started!

What will I need?

All you’ll need is a Google account, which if you have a Gmail account, is already taken care of. Once done, all you have to do is get an API key, which involves you entering the domain name of the site you’re going to use a Google Map on, and including this API key when calling the Google Maps API from within your web sites HTML mark-up.

Unlike other Google services, Maps currently don’t include any advertising, so you really are getting it for nothing, though they do mention that if this policy changes, they will give 90 days notice on the Google Maps API Blog.

You will also need a web site, and somewhere to plot, such as your place of business, or an activity you’re planning.

How it works!

Google Maps is a rather complex JavaScript file that lets you alter the look and feel of a map on your web site by including specific settings. The actual file is hosted on Google's own servers, and you do not need to download it. You simply need to reference it from within your HTML mark-up.

The API will alter your web sites HTML in a manor that is too complex to try and explain here. All that you need to worry about is issuing your preference settings, and let Google take care of the rest.

Building up our example!

The example within this article is going to be the location of Freeola HQ, so when plotting your own location, be sure to substitute in your own relevant information. As this article assumes some HTML knowledge, lets just get in to it!

Getting a map to show up on your web page!

We’ll start with a bare bones HTML page, cutting out page content in order to keep things simple. The code below is an HTML web page with a title and heading of Freeola Broadband, and two paragraphs of text:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<p>It is pretty great!</p>
</body>
</html>


Example 1

While it may not look exactly like your own web site’s code, its structure is similar to any other web page on the web.

The first thing that needs to be done to get a Google Map on your web page is for you to reference Google’s JavaScript file within your web pages <head> element, using the <script> element, such as:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
[B]<script type="text/javascript" src="http://maps.google.com/maps?file=api [U]SPACE[/U] &amp;v=2.x&amp;key=[U]yourAPIkey[/U]"> </script>[/B]
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<p>It is pretty great!</p>
</body>
</html>


Example 2

… though when doing so yourself, be sure to replace [B][U]yourAPIkey[/U][/B] with the one Google issued you when you signed up. If you include the wrong API Key, you’ll see this alert. Also ensure you remove the [B][U]SPACE[/U][/B] from the code, as this is only there because of the forum character limit imposed by Freeola.

Next up, you will need to include an HTML element that Google can place the map in too, and assign it a unique ID. This can be done with a variety of HTML elements, but the easiest, and perhaps most common, is to use a <div> element with an id attribute value of “map”, placed within the area that you wish the map to appear. In this example, we’ll place it under the first paragraph, like so:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
[B]<div id="[U]map[/U]"></div>[/B]
<p>It is pretty great!</p>
</body>
</html>


Example 3

If you view the source code of many web sites that use a Google Map, you’ll find they’ve stuck with the code supplied by Google, but that doesn’t have to be the case. The important aspect is the id attribute, and that the element is a “block-level element”. If you’re unsure what this means, don’t worry, just use the <div> element, which is a “block-level element” by default.

You will then need to include a width and height CSS setting within the <div> element. In our example, we’ll chose a width of 500 pixels, and a height of 400 pixels:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map" [B]style="width: [I]500px[/I]; height: [I]400px[/I];"[/B]></div>
<p>It is pretty great!</p>
</body>
</html>


Example 4

You can also place content within the specified <div> element if you wish, and this will be displayed if the Google Map cannot, for example, using the sample code:

[B]<div id="[U]map[/U]"><p>No map for you.</p></div>[/B]

... users who’s web browser can’t use a Google Map would see the text “No Map for you.”. If you decide to do this, ensure the content is a bit more useful than this example shows.

Now that we’ve defined our HTML element that the map will be placed in, we then need to tell Google Maps about it. We’ll do this using a JavaScript function named loadmap. This will also need to be placed within your web pages <head> element, using a separate <script> element, such as:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
[B]<script type="text/javascript">
[I]// Map settings go within this function.[/I]
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById [B][U]SPACE[/U][/B] ("[U]map[/U]"));
[I]// Settings for your Google Map must go here[/I]
}
}
</script>[/B]
</head>
<body>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map"></div>
<p>It is pretty great!</p>
</body>
</html>


Example 5

Be sure to remove the [B][U]SPACE[/U][/B].

The loadmap function is where you will place your settings that the Google Maps API will read and interoperate into a map on to the screen.

Already within that function is a “conditional statement” or an “if statement”, which checks if the web browser can handle Google Maps. You’ll have to include the map settings within this “if statement”, otherwise you may see some problems. If the web browser can’t handle Google Maps, nothing happens within this “if statement”.

Also already within the function is some code that creates a JavaScript variable that latches on to the HTML element you want your map to be drawn in. If you decide upon a different id value, you will need to also change the value within the last part of this code. For example, if you decide to use the HTML code:

<div id="[B]MyGoogleMap[/B]"></div>

… you will need to ensure the last part of the variable code is altered so it also has the same value, such as:

var map = new GMap2(document.getElementById [B][U]SPACE[/U][/B] ("[B]MyGoogleMap[/B]"));

Note that the var map bit is not changed, only the end of the code.

As the Google API file needs to allow a little time for the HTML page to load up, the loadmap function won’t run right away, so you’ll need to include an event handler within the <body> element, which allows the web browser to tell Google Maps when it’s ready for the loadmap function to get going:

<html>
<head>
<title>Freeola Broadband</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://maps.google.com/maps?file=api [B][U]SPACE[/U][/B] &amp;v=2.x&amp;key=yourAPIkey"></script>
<script type="text/javascript">
// Map settings go within this function.
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
// Settings for your Google Map must go here
}
}
</script>
</head>
<body [B]onload="loadmap()" onunload="GUnload()"[/B]>
<h1>Freeola Broadband</h1>
<p>Internet access via Freeola Broadband</p>
<div id="map"></div>
<p>It is pretty great!</p>
</body>
</html>


Example 6

The GUnload function is part of the Google API, and is included to ensure the users web browser properly clears its internal memory when the Google Maps page has been closed.

Structure is set, time for the painting!

Now that a Google Map has been defined and included, it’s now time to issue your preferred settings for the map, as currently, all you can probably see is a grey box with a Google logo in to bottom left, and a Terms of Use link in the bottom right. If you don’t, then go back over the code samples above, and see what you’ve missed.

From this point, the general HTML shown above will not be included in the code samples, as all the settings will need to go within the loadmap function, in place of the [I]// Settings for your Google Map must go here [/I] comment.

Also note that if you have changed the variable name created when using the var [B]map[/B] code to something else, be sure to use that new variable name where map. is used in the examples below.

Pin-pointing your location, and centring the map around it!

The map has been included on your web site, but now needs to be told which area you wish to show, as well as the level of zoom you want to apply. This is done using Google GLatLng([B]latitude[/B], [B]longitude[/B]) method, which requires the latitude and longitude coordinates of your chosen location. We’ll create a variable called points to store these, as we’ll be using them again later.

You’ll then need to use the Google method map.setCenter(points, [B]zoom[/B]) which will load up the location in to your map centre, then apply the desired zoom setting, which can be anything between 0 and 19 (depending on map availability). In the Freeola example, we’ll use the zoom level of 15:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
[B]var points = new GLatLng([I]51.87959068066881[/I], [I]0.5628638931274414[/I])
map.setCenter(points, [I]15[/I]);[/B]
}
}
</script>


Example 7

Don’t know how to find your coordinates? Try finding your area on the Where Am I map, and click on your desired location. You should see an info bubble pop up with the code that you can copy and paste in to your web page, though you may want to alter the zoom level.

Setting the type of map you see!

Google Maps currently offer three main type of design layout to choose from, which are “Map” (drawing), “Satellite” (photos) and “Hybrid” (drawing on top of photos). By default, you’ll see the “map” layout, and so if you wish to use this map type, you do not need to include any specific settings.

Altering the map type is done using the method map.setMapType([B]type[/B]), and then including the preferred [B]type[/B] within the parentheses (these curvy brackets). This is defined using pre-set values (created by Google), which can either be:

* [I]G_NORMAL_MAP[/I] – for a drawing type map (default).
* [I]G_SATELLITE_MAP[/I] – for a satellite image map.
* [I]G_HYBRID_MAP[/I] – for a mix of the two.

In this example, we’ll use the “Hybrid” map type, so would need to include map.setMapType([I]G_HYBRID_MAP[/I]) within our code, such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
[B]map.setMapType([I]G_HYBRID_MAP[/I]);[/B]
}
}
</script>


Example 8

One important factor to consider is the type of satellite photos available for your chosen location. If the imagery is blurry, or not very detailed, it is probably best to stick with the default map drawing design.

Marking your territory!

Now that you’ve zoomed in to your area, and selected your map type, you’ll want to include a marker icon to pin-point your location to your web site visitors. Google include a basic marker icon that you can use for this purpose, and all that it requires is the points variable which is holding your coordinates. This is done using two lines of code, one to define the markers location, the second to add it to the map:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
[B]var [U]marker[/U] = new GMarker(points);
map.addOverlay([U]marker[/U]);[/B]
}
}
</script>


Example 9

The first line of code creates another variable, called marker, which then creates the marker icon in the correct position. The second line then places the marker on to the map. The reason we don’t condense this in to a single line of code (such as map.addOverlay(new GMarker(points));) is because we can then use the marker variable again to cause the marker to become clickabe, which we will look at a little “later on”.

Adding additional map controls!

To make using the map easier for your visitors, you may want to add the option for your users to zoom in and out of the map, as well as selecting the type of map that they can see. This can be done with the map.addControl([B]type[/B]) method.

The available options (or type values) for defining these map controls are:

* [I]new GLargeMapControl()[/I] – full zoom and directional arrows.
* [I]new GSmallMapControl()[/I] – small zoom and directional arrows.
* [I]new GSmallZoomControl()[/I] – small zoom only.

So, if you only wanted to include a small zoom only control, you would select the third value, and place that within the map.addControl([B]type[/B]) method, such as map.addControl([B]new GSmallZoomControl()[/B])

The code to include map type selection is just a single option of [I]new GMapTypeControl()[/I], and needs to be placed within a separate map.addControl([B]type[/B]) method.

In our example, we’ll include a full map control, and the map selection menu, which can be easily done with two lines of additional code:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
[B]map.addControl([I]new GLargeMapControl()[/I]);
map.addControl([I]new GMapTypeControl()[/I]);[/B]
}
}
</script>


Example 10

In the first line, we’ve added the large map control, which includes the zoom scale bar and directional controls. In the second line, we’ve included the map type selection menu. If you don’t want this selection menu, then don’t include the second line of code.

Letting the user see the scales!

You may also want to include a scale bar, which appears beside the Google logo in the bottom right, and can be added, using another map.addControl([B]type[/B]) method, with a value of [I]new GScaleControl()[/I]:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
[B]map.addControl([I]new GScaleControl()[/I]);[/B]
}
}
</script>


Example 11

Overview window!

One final control you may wish to add is a small overview map in the bottom right corner, which indicates the location of the main map within a blue box, hovering over a zoomed out section of the current location. Again, this is included via the map.addControl([B]type[/B]) method, with a value of [I]new GOverviewMapControl()[/I], such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
[B]map.addControl([I]new GOverviewMapControl()[/I]);[/B]
}
}
</script>


Example 12

The default size of this control is 120 pixels, both width and height, but if you find that the size of this window is too big / small, you can use the GSize([B]width[/B],[B]height[/B]) method inside the GOverviewMapControl() method to define your own sizing. In our example, we’ll make the width 150 pixels, and the height 200 pixels:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl([B]new GSize([I]150[/I],[I]200[/I])[/B]));
}
}
</script>


Example 13

Making your marker in to an information bubble!

As mentioned earlier, we created a marker variable so that it may become clickable “later on”, and now that we’ve reached this “later on”, we can go ahead and get clicking.

To cause the marker icon to become clickable, and display an information bubble, you’ll need to create a function that refers to the marker variable, and includes the text you wish to appear, such as:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl(new GSize(150,200)));

[B]GEvent.addListener([I]marker[/I], "click", function() {
var text = "Freeola!";
map.openInfoWindow([U]points[/U],text);
});[/B]
}
}
</script>


Example 14

You’ll see that we’ve again created a new variable, with the text “Freeola!” as the value. We then reference this variable within the map.openInfoWindow() method, so that Google Maps knows what to show within the information bubble. We’ve also again referenced the points variable, so that the info bubble appears where the marker is positioned.

However, that can appear a little bland, so Google also include an HTML capable information bubble, which is created using the map.openInfoWindow[B]Html[/B]() method. This info bubble looks the same as the one before, but allows you to use HTML mark-up within it, enabling you to create a more creative info bubble.

For our Freeola example, we’ll include a little more information, plus Freeola’s Logo. When including HTML, be sure to escape any quotes that may cause a problem, such as the ones used when creating HTML attributes.

Within JavaScript, you can add extra info to a variable using =+, as is used in the example below to include the Freeola logo, address, phone & fax numbers and web link:

<script type="text/javascript">
function loadmap() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
var points = new GLatLng(51.87959068066881, 0.5628638931274414)
map.setCenter(points, 15);
map.setMapType(G_HYBRID_MAP);
var marker = new GMarker(points);
map.addOverlay(marker);
map.addControl(new GSmallZoomControl());
map.addControl(new GMapTypeControl());
map.addControl(new GScaleControl());
map.addControl(new GOverviewMapControl(new GSize(150,200)));

[B]GEvent.addListener(marker, "click", function() {
var text = "<img src=\"http://freeola.com/freeola.gif\" width=\"140\" height=\"48\" alt=\"Freeola\"><br>";
text += "92-102 East Street<br>";
text += "Braintree<br>";
text += "Essex<br>";
text += "CM7 3JW<br>";
text += "<strong>Sales &amp; Support:</strong> 0871 210 9977<br>";
text += "<strong>Fax:</strong> 0871 210 9988<br>";
text += "<strong>URL:</strong> <a href=\"http://freeola.com\" >http://freeola.com</a>";
map.openInfoWindowHtml(points,text);
});[/B]
}
}
</script>


Example 15

When users click the marker icon, they are shown the information box, complete with HTML mark-up formatting.

Take it from here!

This article was a very gentle introduction in how to add a Google Map to your web site, plotting a single location, as a method for allowing your visitors to locate you and your business. Google offer a wider range of options which enable you to use and manipulate their maps in a variety of ways, so if your needs are greater that what you’ve just read, check out the Google Maps documentation, or have a browse of the Google Maps API Group.

= = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = = =

As always, any comments, questions, and especially corrections are welcome.

Freeola & GetDotted are rated 5 Stars

Check out some of our customer reviews below:

Thank you very much for your help!
Top service for free - excellent - thank you very much for your help.
Impressive control panel
I have to say that I'm impressed with the features available having logged on... Loads of info - excellent.
Phil

View More Reviews

Need some help? Give us a call on 01376 55 60 60

Go to Support Centre
Feedback Close Feedback

It appears you are using an old browser, as such, some parts of the Freeola and Getdotted site will not work as intended. Using the latest version of your browser, or another browser such as Google Chrome, Mozilla Firefox, or Opera will provide a better, safer browsing experience for you.