标签：
Google Geo APIs Team
August 2009
This tutorial is intended for developers who are familiar with PHP/MySQL, and want to learn how to use Google Maps with a MySQL database to create a store locator-type app. After completing this tutorial, you will have a database of locations and a webpage that lets a user enter their address and see markers on a map for the locations nearest to them, within a chosen distance restriction. Since the Google Maps JavaScript API is designed to work well on modern mobile browsers, this article will show how to create a website that displays nicely on them.
The tutorial is broken up into the following steps:
When you create the MySQL table, you want to pay particular attention to the lat and lng attributes. With the current zoom capabilities of Google Maps, you should only need 6 digits of precision after the decimal. To keep the storage space required for your table at a minimum, you can specify that the lat and lng attributes are floats of size (10,6). That will let the fields store 6 digits after the decimal, plus up to 4 digits before the decimal, e.g. -123.456789 degrees. Your table should also have an id attribute to serve as the primary key.
Note: This tutorial uses location data that already have latitude and longitude information needed to plot corresponding markers.
If you prefer interacting with your database through the phpMyAdmin interface, here‘s a screenshot of the table creation.
If you don‘t have access to phpMyAdmin or prefer using SQL commands instead, here‘s the SQL statement that creates the table. phpsqlajax_createtable.sql:
CREATE TABLE `markers` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`name` VARCHAR( 60 ) NOT NULL ,
`address` VARCHAR( 80 ) NOT NULL ,
`lat` FLOAT( 10, 6 ) NOT NULL ,
`lng` FLOAT( 10, 6 ) NOT NULL
) ENGINE = MYISAM ;
After creating the table, it‘s time to populate it with data. The sample data provided below is for about 180 pizzarias scattered across the United States. In phpMyAdmin, you can use the IMPORT tab to import various file formats, including CSV (comma-separated values). Microsoft Excel and Google Spreadsheets both export to CSV format, so you can easily transfer data from spreadsheets to MySQL tables through exporting/importing CSV files.
Here‘s a snippet of the sample data in CSV format. phpsqlsearch_data.csv:
Frankie Johnnie & Luigo Too,"939 W El Camino Real, Mountain View, CA",37.386339,-122.085823
Amici‘s East Coast Pizzeria,"790 Castro St, Mountain View, CA",37.38714,-122.083235
Kapp‘s Pizza Bar & Grill,"191 Castro St, Mountain View, CA",37.393885,-122.078916
Round Table Pizza: Mountain View,"570 N Shoreline Blvd, Mountain View, CA",37.402653,-122.079354
Tony & Alba‘s Pizza & Pasta,"619 Escuela Ave, Mountain View, CA",37.394011,-122.095528
Oregano‘s Wood-Fired Pizza,"4546 El Camino Real, Los Altos, CA",37.401724,-122.114646
...
Here‘s a screenshot of the import options used to transform this CSV into table data:
If you‘d rather not use the phpMyAdmin interface, here‘s a snippet of the SQL statements that accomplish the same results. phpsqlsearch_data.sql:
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Frankie Johnnie & Luigo Too‘,‘939 W El Camino Real, Mountain View, CA‘,‘37.386339‘,‘-122.085823‘);
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Amici\‘s East Coast Pizzeria‘,‘790 Castro St, Mountain View, CA‘,‘37.38714‘,‘-122.083235‘);
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Kapp\‘s Pizza Bar & Grill‘,‘191 Castro St, Mountain View, CA‘,‘37.393885‘,‘-122.078916‘);
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Round Table Pizza: Mountain View‘,‘570 N Shoreline Blvd, Mountain View, CA‘,‘37.402653‘,‘-122.079354‘);
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Tony & Alba\‘s Pizza & Pasta‘,‘619 Escuela Ave, Mountain View, CA‘,‘37.394011‘,‘-122.095528‘);
INSERT INTO `markers` (`name`, `address`, `lat`, `lng`) VALUES (‘Oregano\‘s Wood-Fired Pizza‘,‘4546 El Camino Real, Los Altos, CA‘,‘37.401724‘,‘-122.114646‘);
...
To find locations in your markers table that are within a certain radius distance of a given latitude/longitude, you can use a SELECT statement based on the Haversine formula. The Haversine formula is used generally for computing great-circle distances between two pairs of coordinates on a sphere. An in-depth mathemetical explanation is given byWikipedia and a good discussion of the formula as it relates to programming is on Movable Type‘s site.
Here‘s the SQL statement that will find the closest 20 locations that are within a radius of 25 miles to the 37, -122 coordinate. It calculates the distance based on the latitude/longitude of that row and the target latitude/longitude, and then asks for only rows where the distance value is less than 25, orders the whole query by distance, and limits it to 20 results. To search by kilometers instead of miles, replace 3959 with 6371.
SELECT id, ( 3959 * acos( cos( radians(37) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(-122) ) + sin( radians(37) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < 25 ORDER BY distance LIMIT 0 , 20;
Now that you have the table and the SQL statement, you can put them together to output the search results into an XML format that your map can retrieve through asynchronous JavaScript calls. If the code provided here does not work with your PHP configuration, read through the Outputting XML with PHP section of our Using PHP/MySQL with Google Maps article. The only difference between the various PHP code samples shown there and the code needed for this article will be the SQL statement and the rows that are outputted in the XML.
First, you should put your database connection information in a separate file. This is generally a good idea whenever you‘re using PHP to access a database, as it keeps your confidential information in a file that you won‘t be tempted to share. In public forums, we‘ve occasionally seen people accidentally publish their database connection information when they were just trying to debug their XML-outputting code. The file should look like this, but with your own database information filled in. phpsqlsearch_dbinfo.php:
<?
$username="username";
$password="password";
$database="username-databaseName";
?>
First, check your configuration and see if you‘re using PHP5. If so, continue to the explanation and code below. If you aren‘t, then you can use echo to output XML, as used in this sample code.
In PHP, first initialize a new XML document and create the "markers" parent node. Then connect to the database, execute the SELECT by distance query discussed above on the markers table, and iterate through the results.For each row in the table (each location), create a new XML node with the row attributes as XML attributes, and append it to the parent node. Then dump the XML to the screen.
Note: Since this PHP sends user input in a MySQL statement, this code uses the mysql_real_escape_stringtechnique of avoiding SQL injection. A more elegant solution may be to use MySQL prepared statements, though implementation varies on the PHP version and DB wrapper used.
Note: If your database contains international characters or you otherwise need to force UTF-8 output, you can useutf8_encode on the outputted data.
The PHP file that does all that is shown below (phpsqlsearch_genxml.php):
<?php
require("phpsqlsearch_dbinfo.php");
// Get parameters from URL
$center_lat = $_GET["lat"];
$center_lng = $_GET["lng"];
$radius = $_GET["radius"];
// Start XML file, create parent node
$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);
// Opens a connection to a mySQL server
$connection=mysql_connect (localhost, $username, $password);
if (!$connection) {
die("Not connected : " . mysql_error());
}
// Set the active mySQL database
$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
die ("Can\‘t use db : " . mysql_error());
}
// Search the rows in the markers table
$query = sprintf("SELECT address, name, lat, lng, ( 3959 * acos( cos( radians(‘%s‘) ) * cos( radians( lat ) ) * cos( radians( lng ) - radians(‘%s‘) ) + sin( radians(‘%s‘) ) * sin( radians( lat ) ) ) ) AS distance FROM markers HAVING distance < ‘%s‘ ORDER BY distance LIMIT 0 , 20",
mysql_real_escape_string($center_lat),
mysql_real_escape_string($center_lng),
mysql_real_escape_string($center_lat),
mysql_real_escape_string($radius));
$result = mysql_query($query);
$result = mysql_query($query);
if (!$result) {
die("Invalid query: " . mysql_error());
}
header("Content-type: text/xml");
// Iterate through the rows, adding XML nodes for each
while ($row = @mysql_fetch_assoc($result)){
$node = $dom->createElement("marker");
$newnode = $parnode->appendChild($node);
$newnode->setAttribute("name", $row[‘name‘]);
$newnode->setAttribute("address", $row[‘address‘]);
$newnode->setAttribute("lat", $row[‘lat‘]);
$newnode->setAttribute("lng", $row[‘lng‘]);
$newnode->setAttribute("distance", $row[‘distance‘