Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
882 views

Online Store Locator Using PHP, MySQL and Google Maps API

This document summarizes how to build an online store locator using PHP, MySQL, and the Google Maps API. It involves setting up a database with store location data, querying the database to find the closest stores based on latitude and longitude, outputting the results as JSON, and displaying the stores on a map with markers and info windows using the Google Maps JavaScript API. Key steps include setting up the database, performing distance calculations in SQL queries, generating JSON from PHP, initializing the map, geocoding addresses, searching and displaying stores on the map with markers.

Uploaded by

Aureliano Duarte
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
882 views

Online Store Locator Using PHP, MySQL and Google Maps API

This document summarizes how to build an online store locator using PHP, MySQL, and the Google Maps API. It involves setting up a database with store location data, querying the database to find the closest stores based on latitude and longitude, outputting the results as JSON, and displaying the stores on a map with markers and info windows using the Google Maps JavaScript API. Key steps include setting up the database, performing distance calculations in SQL queries, generating JSON from PHP, initializing the map, geocoding addresses, searching and displaying stores on the map with markers.

Uploaded by

Aureliano Duarte
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Online Store Locator using PHP, MySQL and Google Maps API

Posted on February 3, 2013 by theoryapp Where is the closest McDonalds? This tutorial shows how to build a map-based locator for finding the closest stores. We will use PHP and MySQL for the backend and JavaScript with Google Maps API for the front end.

Setup the Database


The dataset here contains geographical locations of all McDonalds in North America. It is a CSV (Comma-Separated Values) file with three columns: longitude, latitude and address. There are 15163 locations. 1-122.994495, 49.281079, 4805 E Hastings St Burnaby BC V5C 2L1 2-123.024074, 49.265642, 3695 Lougheed Hwy Vancouver BC V5M 2A6 3...... The SQL statement to create the table is as below: 1CREATE TABLE `data_mcdonalds` ( 2 `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY, 3 `lat` DOUBLE NOT NULL, 4 `lng` DOUBLE NOT NULL, 5 `address` VARCHAR(64) NOT NULL ); 6 Then we can import the data from the CSV file to the database. Note that, we need specify the column names to be lng, lat, address when importing.

Search the Closest Stores


There are two ways to search for the stores. One is to specify the central location (lat, lng) and find the closest stores based on their distance to the center. Another way is to specify a bounding box (ranges of lat and lng) and find all stores within the bound. Searching by a bounding box is easy. Suppose we have the bounding box specified by four parameters: lat0, lat1, lng0, lng1. The following query find all stores within a box. 1SELECT * 2FROM `data_mcdonalds` 3WHERE lat >= lat0 AND lat <= lat1 AND lng >= lng0 AND lng <= lng1; 4 Searching with a center requires calculating the distance. Suppose we have the center at (lat0, lng0), the following query find the closest 20 stores within 50 miles.

1 SELECT *, 2 ( 3959 * acos( cos(radians(lat0)) * cos(radians(lat)) * 3 cos(radians(lng) - radians(lng0)) + sin(radians(lat0)) * sin(radians(lat)) ) ) AS distance 4 FROM `data_mcdonalds` 5 HAVING distance < 50 6ORDER BY distance LIMIT 20; 7

Generate JSON Output


Next we use PHP to dynamically query the database and generate the result. 1 <?php 2 function die_with_error($error) { $ret = array( 3 "status" => "Failed", 4 "error" => $error 5 ); die(json_encode($ret)); 6 } 7 8 $lat = $_GET["lat"]; 9 $lng = $_GET["lng"]; 10if (!$lat || !$lng) die_with_error("invalid parameters"); 11 12 13$hostname = '111.111.111.111'; = 'xxxxxx'; 14$username $password = 'xxxxxx'; 15$dbname = 'xxx'; 16 17mysql_connect($hostname, $username, $password) or die_with_error(mysql_error()); 18 mysql_select_db($dbname) or die_with_error(mysql_error()); 19 mysql_set_charset('utf8'); 20 21$query = sprintf("SELECT *, 22 round( 3959 * acos( cos(radians(%s)) * cos(radians(lat)) * cos(radians(lng) - radians(%s)) + sin(radians(%s)) * 23 sin(radians(lat)) ), 2 ) AS distance 24 FROM `data_mcdonalds` 25 HAVING distance < 50 26 ORDER BY distance LIMIT 30;", 27 mysql_real_escape_string($lat), mysql_real_escape_string($lng), 28 mysql_real_escape_string($lat)); 29 $result = mysql_query($query); 30if (! $result) 31 die_with_error(mysql_error()); 32 33$result_array = array(); 34while ($row = mysql_fetch_assoc($result)) { array_push($result_array, array( 35 "id" => $row['id'], 36 "lat" => $row['lat'], 37 "lng" => $row['lng'], "address" => $row['address'], 38

"distance" => $row['distance'] 39 )); 40 } 41 42$ret = array( 43 "status" => "OK", "data" => $result_array); 44 die(json_encode($ret)); 45 46?> 47 48 49 50 51 52 53 54

An example output can be found using this link.

Build the Map


Next we are ready to build a map using Google Maps API. In the HTML code, we define the following elements. 1<input id="address" type="text" value="Vancouver" /> 2<input id="search" type="submit" value="Search" /> 3<div id="map_canvas" style="height: 600px; width: 800px;"> 4</div> The following is the JavaScript code. 1 var map = null; var geocoder = null; 2 var markers = []; 3 var infoWindow = null; 4 5 jQuery('#search').click(function() { var address = jQuery('#address').val() || 'Vancouver'; 6 if (map === null) 7 initializeMap(); 8 searchAddress(address); 9 }); 10 11function initializeMap() { var mapOptions = { 12 zoom: 13, 13 mapTypeId: google.maps.MapTypeId.ROADMAP 14 } map = new google.maps.Map( 15 document.getElementById('map_canvas'), mapOptions); 16 geocoder = new google.maps.Geocoder(); 17 infoWindow = new google.maps.InfoWindow(); 18} 19

20function searchAddress(address) { geocoder.geocode( { 'address': address}, 21 function(results, status) { 22 if (status === google.maps.GeocoderStatus.OK) { 23 var latlng = results[0].geometry.location; map.setCenter(latlng); 24 searchStores(latlng.lat(), latlng.lng()); 25 } else { 26 alert('Address not found: ' + status); 27 } 28 }); 29} 30 31function searchStores(lat, lng) { var url = './store-ajax.php'; 32 var parameter = { lat: lat, lng: lng }; 33 jQuery.ajax({ url: url, 34 data: parameter, 35 dataType: 'json', 36 success: showStores 37 }); 38} 39 40function showStores(data, status, xhr) { if (data['status'] != 'OK') 41 return; 42 43 infoWindow.close(); 44 for (var i = 0; i < markers.length; i++) { 45 markers[i].setMap(null); } 46 markers.length = 0; 47 48 for (var i in data['data']) { 49 createMarker(data['data'][i]); 50 } 51} 52 53function createMarker(store) { var latlng = new google.maps.LatLng( 54 parseFloat(store['lat']), 55 parseFloat(store['lng']) 56 ); var html = "<b>" + store['address'] + "</b>" + 57 store['distance'] + " miles"; 58 var marker = new google.maps.Marker({ 59 map: map, 60 position: latlng }); 61 google.maps.event.addListener(marker, 'click', function() { 62 infoWindow.setContent(html); 63 infoWindow.open(map, marker); 64 }); 65 markers.push(marker); } 66

You might also like