HTML 5 and Google Maps for the Milton Keynes Tourist Board

As well as being culturally diverse ( the Welsh enclave is currently painting her toenails upstairs in the bedroom) Milton Keynes does have one or two places of interest.
Yes, there are quite a lot of roundabouts. There are also connections with Formula 1 ( Red Bull Racing has it’s factory here), the birth of modern computing (Bletchley Park), and a crude but effective measure against the risk of disease in livestock (i.e. by making them out of concrete).
Wouldn’t it be handy if I could knock up a web-page with map locations of these and other sites of interest, ready for visitors to our fair city.
I stumbled across something that fits this particular bill when browsing through the HTML5 new features on the W3 Schools site.

One of the really good things about this particular site is that they’ll give you source code to play with and to observe the result of any changes.
The code, shamelessly plagiarised here, is to demonstrate the capabilities of HTML5 in terms of Geolocation – i.e. it works out the current position of your computer and displays the result in the form of a Google Map.
Whilst playing around with this, it occurred to me that you could pass in any co-ordinates of longitude and latitude and produce the desired map.

Currently, I don’t believe that Milton Keynes has a Tourist Board. If they do decide to get one, they might find the following useful…

Getting the Co-ordinates

There are probably lots of more sophisticated ways of getting the required co-ordinates for a particular building or landmark. However, I went the simple route. This involves :

  • finding the place you’re interested in on Google Maps
  • right-clicking the red location arrow and selecting “what’s here?” from the pop-up menu
  • hovering over the green location arrow until the co-ordinates pop-up
  • err….
  • …that’s it

The HTML Source

Here it is then, a simple html page with a list of attractions in and around MK together with a button to display the map location at the bottom of the page, and a link to the Wikipedia page.
I know, simple things please simple minds.

<html>
	<head>
		<title>Milton Keynes - not just Roundabouts</title>
	</head>
	<body>
		<h1>Welcome to Milton Keynes</h1>
		<p id="GuidedTour">
			Here are just some of the attractions in and around Sunny MK...<br/>
		</p>
		<!-- Now display a table. The first column links to the Wikipedia page
			 the second contains a button. When pressed, the button displays a map using
			 the whizzy HTML5 geolocation stuff and the Google API.
			 Example code taken from http://www.w3schools.com/html5/html5_geolocation.asp
		 -->
		<table border="1">
			<tr>
				<th>Attraction</th><th>Map</th>
			</tr>
			<tr>
				<td><a target="_blank" href="http://en.wikipedia.org/wiki/Bletchley_Park">Bletchley Park</a></td>
				<td><button onclick="showPosition(51.997512, -0.739524)">Map</button></td>
			</tr>
			<tr>
				<td><a target="_blank" href="http://en.wikipedia.org/wiki/Concrete_Cows">Concrete Cows</a></td>
				<td><button onclick="showPosition(52.051110, -0.795169)">Map</button></td>
			</tr>
			<tr>
				<td><a target="_blank" href="http://en.wikipedia.org/wiki/Red_Bull_Racing">Red Bull F1 Team</a></td>
				<td><button onclick="showPosition(52.008001, -0.692829)">Map</button></td>
			</tr>
			<tr>
				<td><a target="_blank" href="http://en.wikipedia.org/wiki/Aston_martin">Aston Martin Old Factory</a></td>
				<td><button onclick="showPosition(52.084306, -0.715681)">Map</button></td>
			</tr>
			<tr>
				<td><a target="_blank" href="http://en.wikipedia.org/wiki/Peace_pagoda#Milton_Keynes.2C_England">Peace Pagoda</a></td>
				<td><button onclick="showPosition(52.056396,-0.726056)">Map</button></td>
			</tr>
		</table>
		<div id="theMap"></div>
		<!-- This is the part of the page where the map is displayed -->
		<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
		<script>
			var x=document.getElementById("GuidedTour");
			function showPosition(lat, lon)
				<!-- Accept 2 arguments, latitude and longitude -->
			  {
			  latlon=new google.maps.LatLng(lat, lon)
				<!-- Define the properties of the mapholder object -->
			  mapholder=document.getElementById('theMap')
			  mapholder.style.height='250px';
			  mapholder.style.width='500px';

			  var myOptions={
				<!-- Now some styling info -->
			  center:latlon,zoom:14,
			  mapTypeId:google.maps.MapTypeId.ROADMAP,
			  mapTypeControl:false,
			  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
			  };
			  // Now render the map in theMap div of the page using the properties
			 //  in the myOption object. And add a helpful arrow to point at the exact location
			
			  var map=new google.maps.Map(document.getElementById("theMap"),myOptions);
			  var marker=new google.maps.Marker({position:latlon,map:map,title:"Here it is"});
			  }

		</script>
	</body>
</html>

When you load it all into a browser, the result looks something like this :

Bletchley Park- every geek should visit here once in his or her life.


I'm sure that, at some point, I'll come across circumstances where this could be useful. I know, maybe I could store the co-ordinates in a database table....
What's that noise ? Oh, Deb is just doing her interpretation of one of the scenes from March of the Penguins. The nail varnish obviously isn't quite dry yet.

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s