How to display map of UK postcode using MultiMap

If you would like to display map of UK postcode using MultiMap then its fairly easy however you’ll have to understand a bit how MultiMap does it.

First you will have to register as a developer on the website through the following URL http://www.multimap.com/openapi/

Once you have confirmed your account you can use the client API provided by them to use in your code. Now you can use the following code to display the map

<html>
<head>
<title>Testing the MultiMap API for displaying map of UK postcode</title>
 <script src="http://clients.multimap.com/API/maps/1.2/<ClIENT_API_HERE>" type="text/javascript"></script>
</head>
<body>
<script language="javascript" type="text/javascript">
        var mapviewer, marker, geocoder;
        var postcode_form;
        function onLoad() {
            mapviewer = MMFactory.createViewer( document.getElementById( 'mapviewer' ) );
            //mapviewer.goToPosition( new MMAddress( { 'qs' : 'London', 'country_code' : 'GB' } ) , 14 );
            mapviewer.goToPosition( new MMAddress( { 'country_code' : 'GB' } ) , 14 );
            container = document.getElementById ('mapviewer');
            pan_zoom_widget = new MMPanZoomWidget( new MMBox () );
            pan_zoom_widget.setContainer(container);
            mapviewer.addWidget ( pan_zoom_widget );
            geocoder = new MMGeocoder( handleGeocodeResults );
            geocodePostCodes();
        }
        function geocodePostCodes() {
            var addresses = new Array;
            addresses.push( new MMAddress( { 'postal_code' : '<ENTER_POSTCODE_HERE>', 'country_code' : 'GB' } ) );
            if (addresses.length > 0)
                geocoder.geocode( addresses );
        }
        function handleGeocodeResults( result_set ) {
            // Clear any old overlays from the map
            mapviewer.removeAllOverlays();
            var markers = new Array;
            var addresses = result_set;
            // Iterate the addresses and create a marker for each one
            for (var i = 0, j = addresses.length; i < j; i++) {
                var result = addresses[i];
                for (var k = 0, l = result.length; k < l; k++) {
                    if (result[k] && result[k].coords) {
                        var marker = mapviewer.createMarker( result[k].coords );
                        marker.setInfoBoxContent( result[k].address.display_name );
                        markers.push( marker );
                    }
                }
            }
            // Auto scale the map
            var auto_scale = mapviewer.getAutoScaleLocation( markers );
            mapviewer.goToPosition( auto_scale );
        }
        MMAttachEvent( window, 'load', onLoad );
</script>
</body>

Hope the above helped

Leave a Reply

Your email address will not be published. Required fields are marked *