By the end of this worksheet, you will be able to:

Embed a Google Map into a web page using a <div> and jQuery.
Style a map container with CSS to control its size and appearance.
Initialise a map with jQuery’s .gmap() method.
Set key map properties such as centre location, zoom level, and map type.
Add custom markers to a map at specific coordinates.
Attach click events to markers to display labels or trigger other actions.
Dynamically update a map using .setZoom(), .setMapTypeId(), and .panTo().
Experiment with mashup ideas, like connecting map interactions with media events. </aside>

Preface

Hello again. By now you will hopefully have seen the possibilities that jQuery offers for creating rich content on web sites in the form of interaction and media playback, using minimal code. This week we’ll be extending this into the realm of Google Maps.

Google Maps makes it easy to embed a map into a web page (with an <iframe> embed), but Google Maps also provides an API (Application Programming Interface) for web designers wanting to do more advanced work with maps.

This week you’ll learn how to embed a Google Map into a web page and add custom markers with custom labels.

To help us set terrain types, add markers, update locations etc. we’re going to draw on a tiny plugin (jquery-map-ui) that allows us to use jQuery-like commands to select elements and embed/manipulate a map without having to have a deep understanding of JavaScript or the Google Maps API. The plugin is no longer developed, but the API/sample code Wiki can be found archived on Google Code.

There are likely a ton of alternative ways to put a Google Map on a page, so treat this chapter as a practical mashup-style exercise.

</aside>

Setting Up

The Google Map API provides access via a number of programming languages. Its JavaScript access is highly comprehensive but requires knowledge of ‘vanilla’ JavaScript. Luckily, there is a useful library that allows us to interact with the API using jQuery. In order to make use of this we have to do a bit of setting up and will need to include the following into our HTML document:

jQuery (you should already have this in your folder).
Google Maps JavaScript API (we’ll pull this off Google’s servers).
jQuery Map library (available for download via the MMCC2041 page, place in the same folder as your HTML files).

The <head> section of the default HTML document (available from the MMCC2041 page) looks like this:

<head>
<meta charset="utf-8">
<title>MMCC2041</title>
<link rel="stylesheet" href="style.css">
*<script src="<https://maps.google.com/maps/api/js?key=AIzaSyC1kwdCPHCWJj-OUiKT1bwazL37BXS6sqg>"></script>*
<script src="jquery-3.7.1.min.js"></script>
*<script src="jquery.ui.map.full.min.js"></script>*
<script>
$(document).ready(function() { // do not delete this line

}); // do not delete this line
</script>
</head>

You can see (in italics) that we’ve added a couple of extra lines to include a) the Google Maps API and b) the jQuery Maps library. Ensure that these <script> tags are in the same order as above or things won’t work properly.