There is a Swansea but to get there you’ll probably need a map … a Google Map. So here are some quick examples to get you started.

All of the following use Google Maps Version 3.

Adding a Google Map means adding some Javascript to your page and accessing the Google Maps API.

Note: When the Google Maps API first appeared in 2005 it was free to use. In November 2011 Google introduced licensing for high volume users and this has lead some sites to jump ship to other mapping services in particular Openstreetmap.

Getting Started

We are aiming to produce this:

First thing you’ll want to do is sign up with Google and get yourself an API key. Sign up to Google here.

Calling the API

Once you have a key, this is then used in your call to the Google Maps API as follows adding your key where I have put ‘YOUR-KEY-HERE’ :

<script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=YOUR-KEY-HERE0&sensor=true">
</script>

The ‘sensor’ parameter above can be set to ‘true’ or ‘false’. This indicates whether you wish to use the likes of GPS to determine the user’s location – a feature of most mobile web browsers.

Warning: You must add a value for ‘sensor’. It cannot be left blank. Your request to the API will fail if it is missed out.

Depending on your preference to managing your Javascript, the call to the API could go either in the <head> of your HTML or before the closing </body> in your HTML.

Creating a Placeholder

We now need to add some HTML to the web page that will act as the placeholder for the map. In most cases a <div> tag with an ID is the best approach. (You don’t necessarily have to do this but you do need a targetable bit of HTML and this is as good a way as any).

<div id="myFirstMap">

</div>

Ensure that you styling gives the placeholder the dimensions you wish for your map.

<style type="text/css">
#myFirstMap{
			width:640px;
			height:480px;
			border:1px solid #FC0;
}
</style>

Setting Map Options

The Google Map API has a huge range of options that can be applied to your map. However, some of these aren’t really ‘optional’ as for example you’ll need to at least provide a latitude and longitude value to get a map!

These ‘options’ are declared in a Javascript object. Here is a basic example that includes a LatLng value, a zoom value and a map type.

var myOptions = {
          center: new google.maps.LatLng(53.3801, -1.4653),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

Creating the Map Object

To create the Map object itself we need to reference our placeholder and the options created above. I am using Javascript’s getDocumentById here to reference the <div> of ID ‘myFirstMap’

var map = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);

The above is placed in a function with the options object as follows:

<script>
function initialize(){
	var myOptions = {
          center: new google.maps.LatLng(51.62437128841585, -3.9431847585819924),
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
     var myMap = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);
      }
</script>

Firing the Code

The above function needs to be called when the document is ready. You could use jQuery here but I’ll keep it in plain old Javascript for now.

We’ll kick off the Javascript with an onload event against the <body> tag.

<body onload="initialize()">

You’ll need to take a trip to the Google Maps documentation at some point but hopefully you can now find your way to Swansea.


Here are a few more pointers.

More on Options

The Google documentation is exhaustive (and exhausting). It helps if you have some grasp of basic programming jargon like classes, object, properties, methods and events . To help you on your way here are of some of the most popular map options set in the MapOptions object.

center
LatLng object from LatLng Class
zoom
0 full globe – higher numbers to zoom in ie 7, 18
mapTypeId
ROADMAP, SATELLITE, HYBRID, TERRAIN
mapTypeControl
Boolean disable/enable map type controls
panControl
Boolean disable/enable pan controls
streetViewControl
Boolean disable/enable street view controls
zoomControl
Boolean disable/enable zoom controls

In a code context these would look as follows:

function initialize(){
	var myOptions = {
          center: new google.maps.LatLng(51.62437128841585, -3.9431847585819924),
          zoom: 10,
          mapTypeId: google.maps.MapTypeId.HYBRID
          mapTypeControl: false,
          panControl: false,
          streetViewControl: false,
          zoomControl: false
};
var myMap = new google.maps.Map(document.getElementById("myFirstMap"), myOptions);
}

Markers

Markers or ‘pins’ are a crucial part of any map. They are created by declaring a marker object from the Marker class. When creating a marker object it can take a number of parameters passed to it as a MarkerOptions object. In the following example the marker is given a lat/lng, assigned to a map object, given a title and made draggable.

var myMarker = new google.maps.Marker(
  {position: myLatlng,
  map: myMap,
  title:"Hello World!",
  draggable: true}
  );

The Google documentation gives you the full range of possibilities.

InfoWindows

InfoWindows are the speech bubble effects that can be attached to markers. These are achieved through the InfoWindow class.

var myInfowindow = new google.maps.InfoWindow(
{content: "Hello World"}
);
myInfowindow.open(myMap,myMarker);

InfoWindows are often set to respond to user clicks. The Google API lists events associated with each type of object, so for example there are a list of events associated with markers. The following example uses the ‘click’ event to open an infoWindow when a marker is clicked.

google.maps.event.addListener(myMarker, 'click', function() {
myInfowindow.open(myMap,myMarker);
});

Get Position of Dropped Marker

You may have noticed above that we set the MarkerOptions ‘draggable’ to ‘true’. We can use events to capture where the marker is dropped and find the latitude and longitude of that point.

google.maps.event.addListener(myMarker, 'dragend', function() {
document.getElementById('currentLatLng').innerHTML = marker.getPosition()
});

The above will send the lat/long value to a HTML element of ID ‘currentLatLng’ as you can see in the demo.

StreetView with the StreetViewPanorama Class

When Google introduced StreetView in 2007 it was of those ‘wow – how did they do that – surely magic pixies’ moments. The magic is all down to the StreetViewPanorama class.

This class takes as its constructor a StreetViewPanoramaOptions object.

The following are the key properties of the StreetViewPanoramaOptions class.

position
LatLng object
pov
StreetViewPov Object – heading, pitch, zoom
addressControl
Boolean disable/enable address control
scrollwheel
Boolean disable/enable scroll wheel zoom
zoomControl
Boolean disable/enable zoom controls

The StreetViewPanoramaOptions object can be created as follows:

var panoramaOptions = {
	position: sv,
	pov: {
	  heading: 0,
	  pitch: 0,
	  zoom: 1
	},
	addressControl: false
};

Once you set your options, these are used to create the streetview and attach it to a targeted element in the HTML. In this example I am using Javascript’s getElementById to reference a HTML element of ID ‘mySV’.

var panorama = new google.maps.StreetViewPanorama(document.getElementById("mySV"),panoramaOptions);

Geolocation

With HTML5 browsers comes the possibility of getting geolocation information via JavaScript. This information can then be feed back to a Google Map.

The following Javascript allows supporting browsers to retrieve geolocation data.

navigator.geolocation.getCurrentPosition(show_map);
function showMap(position)
{
console.info(position);
}

The following codes takes the ‘position’ data from the Geolocation API and passes it to a Google map.

navigator.geolocation.getCurrentPosition(showMap);

 function showMap(position)
 {
 var latitude = position.coords.latitude;
 var longitude = position.coords.longitude;
//uses jQuery to update an HTML element of ID 'whereAmI' with the latitude and longitude
 $('#whereAmI').append('<p>Your Latitude is: '+position.coords.latitude+
 ' Your Longitude is: '+position.coords.longitude+'</p>');
 var myLatLng = new google.maps.LatLng(latitude, longitude);
 var myOptions = {
          center: myLatLng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
 var myMap = new google.maps.Map(document.getElementById("myGeoMap"), myOptions);
 var myMarker = new google.maps.Marker({position: myLatLng, map: map, title:"You are Here", draggable: true});
}

You can find more about the Geolocation API at the following sites.

There you go – all mapped out for you now.

Postscript: This great post is useful if you intend to load the Google Maps API dynamically with jQuery’s getScript()- http://lostmonocle.com/post/88217865/jquery-getscript-and-the-google-maps-api – thanks to Olly Hodgson.

Leave a Comment