0151 355 4555

Google Maps API Integration

The Google Maps API provides its own geocoder, GClientGeocoder. While this works well for most inputs, it is forced to provide inaccurate results for the location of postcodes due to the licencing restrictions on the data - the difference can be as much as several miles.

By using the Integr8 Geocoding service, you have a licence to access the postcode location data provided by the Royal Mail. If you are also using Google Maps API, we provide our own drop-in replacement for GClientGeocoder that will use the Integr8 Geocoding service for finding the location of postcodes, and the Google Maps API service for finding other locations.

To use the Integr8 Geocoding service in this way, simply add the following Javascript code to your existing Google Maps API page:

<!-- Import the Integr8 Geocoder -->
<script type="text/javascript" src="http://webservices.data-8.co.uk/Geocoder/GData8ClientGeocoder.ashx?key=your-api-key">
</script>

After including this code, you can simply replace all references to GClientGeocoder with GData8ClientGeocoder. Whenever you now try to geocode a postcode, the Integr8 Geocoding service will be called. For all other inputs, the existing Google Geocoding service will be used instead.

The example code below displays a map and a textbox into which the user can enter a location. Clicking on the "Find" button will center the map on the entered location.

<!-- Import the Integr8 Geocoder -->
<script
  src="http://webservices.data-8.co.uk/Geocoder/GData8ClientGeocoder.ashx?key=your-api-key"
  type="text/javascript"></script>

<!-- Import the Google Maps API -->
<script
  src="http://maps.google.com/maps?file=api&v=2&key=your-google-api-key"
  type="text/javascript"></script>

<script type="text/javascript">

var map;
var geocoder;

function initalizeMap() {
    if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        geocoder = new GData8ClientGeocoder();
        var textbox = document.getElementById("location");
        var find_btn = document.getElementById("find_btn");
        
        GEvent.addDomListener(find_btn, "click", function() {
            map.clearOverlays();
            geocoder.getLatLng(textbox.value, showGeocoderResult);
        });
    }
}

function showGeocoderResult(result) {
    if (result != null) {
        map.setCenter(result, 11);
        map.addOverlay(new GMarker(result));
    }
}

</script>

<div id="map_canvas" style="width: 400px; height: 400px"></div>
<input id="location" />
<input id="find_btn" type="button" />