|
Home - Developer Centre - Tutorials - Google Maps quick start
We've heard from lots of people looking at using Google® Maps in their web applications not only because they look seriously cool but also,
if we're completely honest, because they are free!
While the mapping is pretty comprehensive, the service doesn't offer geocoding (e.g. postcode -> coordinates) at the moment which some
people have found a bit limiting. Well that's where we come in! We've put together a couple of samples which use our service for the
Geocoding and Google® maps for the mapping stuff.
This sample makes use of our Inline Javascript services. These provide an AJAX-like mechanism for contacting Postcode Anywhere. They
work in a very similar way to the Google® Maps API so it's very simple for both to work together.
This walk-through will take you through a very simple example that asks you for a postcode, gets the coordinates from our servers
then centres the map on the location.
Before starting this tutorial, we need to create a simple HTML page which we will add the
code to.
You will also need a web service license key (just go through the setup wizard in My Account
to get one if you don't already) and a Google® Maps license key.
<html>
<body>
Postcode: <input type=text id=txtPostcode> <input type=button value="Centre">
<div id="map" style="width: 500px; height: 400px"></div>
</body>
</html>
The first step is to add the Google® Maps code to the page. This needs to be added to the header and
to the body. This imports the code from the Google® servers and tells it to draw a map in the "map" DIV.
We'll also add an OnClick expression for the button. This will call a function "reCenter()" that we'll
code up in the next section.
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=X...X" type="text/javascript"></script>
</head>
<body>
Postcode: <input type=text id=txtPostcode> <input type=button value="Centre" onclick="reCentre()">
<div id="map" style="width: 500px; height: 400px"></div>
<script>
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
</script>
</body>
</html>
The next step is to add the inline code which actually makes the request to Postcode Anywhere.
We can get this code direct from the GeocodePostcode documentation:
just scroll down to the "Javascript function" button and copy the contents:
<html>
<head>
<script src="http://maps.google.com/maps?file=api&v=1&key=X...X" type="text/javascript"></script>
</head>
<body>
Postcode: <input type=text id=txtPostcode> <input type=button value="Centre" onclick="reCentre()">
<div id="map" style="width: 500px; height: 400px"></div>
<script>
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
</script>
<script>
function pcaGeocodePostcodeBegin(postcode, building, accuracy, account_code, license_code)
{
var scriptTag = document.getElementById("pcaScript");
var headTag = document.getElementsByTagName("head").item(0);
var strUrl = "";
//Build the url
strUrl = "http://services.postcodeanywhere.co.uk/inline.aspx?";
strUrl += "&action=geocode";
strUrl += "&postcode=" + escape(postcode);
strUrl += "&building=" + escape(building);
strUrl += "&accuracy=" + escape(accuracy);
strUrl += "&account_code=" + escape(account_code);
strUrl += "&license_code=" + escape(license_code);
strUrl += "&callback=pcaGeocodePostcodeEnd";
//Make the request
if (scriptTag)
{
try
{
headTag.removeChild(scriptTag);
}
catch
{
//Ignore
}
}
scriptTag = document.createElement("script");
scriptTag.src = strUrl
scriptTag.type = "text/javascript";
scriptTag.id = "pcaScript";
headTag.appendChild(scriptTag);
}
function pcaGeocodePostcodeEnd()
{
//Test for an error
if (pcaIsError)
{
//Show the error message
alert(pcaErrorMessage);
}
else
{
//Check if there were any items found
if (pcaRecordCount==0)
{
alert("Sorry, no matching items found");
}
else
{
//PUT YOUR CODE HERE
}
}
}
</script>
</body>
</html>
Next we need to update the pcaGeocodePostcodeEnd() function, adding some lines into the "//PUT YOUR CODE HERE"
block. In fact we don't need to do much, just create a new Google® point object (GPoint) and centre the map on the
coordinates we've found. Notice that we're using the WGS84 longitude and latitude coordinates rather than the
more normal eastings + northings because of the international nature of the Google® service.
We'll also add a Google® marker (pin) in the location that contains the name of the location (again from the web service).
//PUT YOUR CODE HERE
var point = new GPoint(pca_wgs84_longitude[0], pca_wgs84_latitude[0]);
//Centre the map
map.centerAndZoom(point,1);
//Add a marker
var marker = new GMarker(point);
GEvent.addListener(marker, 'click', function() {
marker.openInfoWindowHtml(pca_location[0]);
});
map.addOverlay(marker);
Finally we just need to create the reCentre() function. This calls pcaGeocodePostcodeBegin() with
the postcode to geocode and our Postcode Anywhere account and web service license key.
Now's probably a good time to point out that pcaGeocodePostcodeBegin() takes building and accuracy
parameters. If you provide a building name or number, you need to also set the "accuracy" parameter as "high"
otherwise the coordinates will be based just on the postcode rather than the property.
function reCentre()
{
pcaGeocodePostcodeBegin(document.getElementById("txtPostcode").value, "", "", "AAAAA11111", "AA11-AA11-AA11-AA11")
}
It's that simple. Just open the page in a browser and enter a postcode then click on the
"Centre" button then see the map focus in on the location. OK so this isn't the most exciting
thing in the world but gives you a lot of options for building really cool store locators.
|