postcode search for nearest location

Question

Can someone please tell me how to add a list of UK locations to a google map, and then using a postcode search for the nearest one.

I have a google api, can anyone please help?

Many thanks

UPDATE: Many thanks for your replies.

I have a CSV file with addresses, is it possible to get the geocode for each address on the fly, and populate my google map?

I currently query my database to get the stored geocode.

Here is my sample:

http://www.mharrisweb.co.uk/maps/map.html

Answer 1

/*jslint browser: true */
/*global google */
function toRad(value) {
    "use strict";
    /** Converts numeric degrees to radians */
    return value * (Math.PI / 180);
}

function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2, unit) {
    "use strict";
    var a, c, d, R, dLat, dLon;
    R = (unit === 'mi') ? 3958.75587 : (unit === 'ft') ? 20902230.9711286 : 6371; // Mean radius of the earth in km
    dLat = toRad(lat2 - lat1); // toRad below
    dLon = toRad(lon2 - lon1);
    a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
    c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    d = R * c; // Distance in km
    return d;
}

function calcDistance(checkCoords, lat, lng) {
    "use strict";
    var closestLatLng, distance = 7000, i, latlng;
    for (i = 0; i < checkCoords.length; i = i + 1) {
        latlng = checkCoords[i].split(",");
        if (getDistanceFromLatLonInKm(latlng[0], latlng[1], lat, lng) < distance) {
            distance = getDistanceFromLatLonInKm(latlng[0], latlng[1], lat, lng);
            closestLatLng = [latlng[0], latlng[1]];
        }
    }
    return closestLatLng;
}

function addMarker(lat, lng, title, map) {
    "use strict";
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(lat, lng),
        title: title
    });
    marker.setMap(map);
    return (lat + ',' + lng);
}

function show_map(lat, lng) {
    "use strict";
    var checkCoords = [], closestLatLng, latlng, map, myOptions;
    latlng = new google.maps.LatLng(lat, lng);
    myOptions = {
        zoom: 10,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_container"), myOptions);
    checkCoords[0] = addMarker(51.477118, -0.000732, 'Royal Observatory, Greenwich, London', map);
    checkCoords[1] = addMarker(38.92126, -77.066442, 'US Naval Observatory, Washington, DC', map);
    checkCoords[2] = addMarker(48.853499, 2.348090, 'Notre Dame Cathedral, Paris', map);
    closestLatLng = calcDistance(checkCoords, lat, lng);
    map.panTo(new google.maps.LatLng(closestLatLng[0], closestLatLng[1]));
}

function getLatLng(postcode) {
    "use strict";
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': postcode
    }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            show_map(results[0].geometry.location.lat(), results[0].geometry.location.lng());
        }
    });
}

function get_location() {
    "use strict";
    document.getElementById('map').innerHTML = '<form id="postcodeEntry" method="post" action="#" onsubmit="getLatLng(this.postcode.value);return false;">'
        + '<fieldset>'
        + '<label for="postcode">Enter your postcode for directions</label>'
        + '<input type="text" name="postcode" id="postcode" />' + '<input type="submit" />'
        + '</fieldset>'
        + '</form>'
        + '<div id="map_container" style="width:300px;height:300px">Map will appear after postcode entry</div>';
}

get_location();

*edited to pass jslint

That's a basic form of what you are after. You can see it in action on this (updated) jsfiddle.

Answer 2

I suppose that you want to add markers when you say "Add a list of locations" so to do that, you can do a loop and add for each location the marker.

You can do something like that :

function addMarker (locations){
   for(var i =0; i< locations.length; i ++)
   {
       // Create a new location
       var loc = new google.maps.LatLng(locations[i].latitude, locations[i].longitude);

       // Create the marker options
       var markerOptions = {
           map: yourMap,
           position: loc
       };
       // Add the marker on map
       var marker = new google.maps.Marker(markerOptions);
   }
}

And you have all your locations on your map.

You said to you want to do a postcode search to find the nearest.

So i find this link that can interest you to do that.

Hope it help.