Building a location radius search with the Google Maps API

Recently I was given the following brief.

Build a mySQL database of locations and have those locations shown on a Google Map based on a town or postcode radius search.

That sounds simple enough, right?! Fortunately Google has an excellent Maps API so this task wasn’t too difficult.

Please focus your search around Manchester when using the demo.

Here’s an overview of how it works

The whole soluiton relies heavily on the Google Maps API and the retrieval and storage of Latitude and Longitute coordinates for not only the locations stored in the database but also for the search criteria.

Inserting

I have a mySQL database with a table called ‘markers’ with the following fields:

 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY
 `name` VARCHAR( 60 ) NOT NULL
 `postcode` VARCHAR( 10 ) NOT NULL
 `lat` FLOAT( 10, 6 ) NOT NULL
 `lng` FLOAT( 10, 6 ) NOT NULL

When a record is inserted in to the database (name and postcode in this example) I use some PHP code to connect to the Google Maps API and receive the Latitude (lat) and Longitude (lng) for the given postcode and store those along with the user entered data.

Here’s the PHP code which gets the lat and lng:

$coordinates = file_get_contents('http://maps.googleapis.com/maps/api/geocode/json?address=' . urlencode($postcode) . '&sensor=true');
$coordinates = json_decode($coordinates);
$lat = $coordinates->results[0]->geometry->location->lat;
$lon = $coordinates->results[0]->geometry->location->lng;

Searching

When someone uses the search the Google API is used to get the Latitude and Longitude of the entered town or postcode using Javascript.

function searchLocations() {
    var address = $("#Search").val();
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        componentRestrictions: {
            country: 'UK'
        },
        address: address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            searchLocationsNear(results[0].geometry.location);
        }
    });
}

This along with the radius is posted to the following PHP code where the database is queried. This awesome piece of code returns all of the locations/markers in the database within the radius of the search location using some clever Latitude and Longitude calculations.

$R = 3959;  // earth's mean radius in miles
$maxLat = $lat + rad2deg($rad/$R);
$minLat = $lat - rad2deg($rad/$R);
$maxLng = $lng + rad2deg(asin($rad/$R) / cos(deg2rad($lat)));
$minLng = $lng - rad2deg(asin($rad/$R) / cos(deg2rad($lat)));

$sql = "Select id, name, postcode, lat, lng,
               acos(sin(:lat)*sin(radians(lat)) + cos(:lat)*cos(radians(lat))*cos(radians(lng)-:lng)) * :R As D
        From (
            Select id, name, postcode, lat, lng
            From markers
            Where Lat Between :minLat And :maxLat
              And lng Between :minLng And :maxLng
        ) As FirstCut
        Where acos(sin(:lat)*sin(radians(lat)) + cos(:lat)*cos(radians(lat))*cos(radians(lng)-:lng)) * :R < :rad Order by D"; $params = [ 'lat' => deg2rad($lat),
    'lng'    => deg2rad($lng),
    'minLat' => $minLat,
    'minLng' => $minLng,
    'maxLat' => $maxLat,
    'maxLng' => $maxLng,
    'rad'    => $rad,
    'R'      => $R,
];

After the query is run the results are output in XML format ready for the Google Map to read.

What to do next

There is some cool stuff you can do with the map and markers such as animations, custom markers and styling. I recommend you take a look at:

https://developers.google.com/maps/documentation/javascript/markers
https://snazzymaps.com/

The code uses jQuery, AJAX, Javascript, PHP, SQL and Bootstrap.

Building a Facebook Login Process
March 30, 2017