Monday, September 3, 2012

Use PHP, MySql and Google Map API v3 for displaying data on map

http://tips4php.net/2010/10/use-php-mysql-and-google-map-api-v3-for-displaying-data-on-map/Displaying data on maps can be useful in many situations.
By integrating tools like PHP, MySQL and Google Maps, you can relatively easy build customized maps for your website or blog.

In this post we’ll take a closer look on the possibilities, and build a  interactive map based on PHP, MySql and Google Map API v3.

Geocoded data

The script in this post uses MySQL for storing the data that’s going to be displayed on the map. This method works fine if you’re adding multiple points to your map (10+), and want a dynamic way to retrieve data data. If you’re going to display less than 10 Points the solution in this post is a little overkill.

Before proceeding, you need some geocoded data (data that contains lat/long information) to display on the map. If you don’t have geocoded data, you can find a post here, where you can learn how to geocode addresses for usage on eg. Google Maps.
You can use the following test data for this example:

01CREATE TABLE IF NOT EXISTS `poi_example` (
02 `id` int(11) NOT NULL AUTO_INCREMENT,
03 `name` text NOT NULL,
04 `desc` text NOT NULL,
05 `lat` text NOT NULL,
06 `lon` text NOT NULL,
07 PRIMARY KEY (`id`)
08) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
09 
10--
11-- Data dump for the table `poi_example`
12--
13 
14INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`) VALUES
15(1, '100 Club', 'Oxford Street, London  W1<br/>3 Nov 2010 : Buster Shuffle<br/>', '51.514980', '-0.144328'),
16(2, '93 Feet East', '150 Brick Lane, London  E1 6RU<br/>7 Dec 2010 : Jenny & Johnny<br/>', '51.521710', '-0.071737'),
17(3, 'Adelphi Theatre', 'The Strand, London  WC2E 7NA<br/>11 Oct 2010 : Love Never Dies', '51.511010', '-0.120140'),
18(4, 'Albany, The', '240 Gt. Portland Street, London  W1W 5QU', '51.521620', '-0.143394'),
19(5, 'Aldwych Theatre', 'Aldwych, London  WC2B 4DF<br/>11 Oct 2010 : Dirty Dancing', '51.513170', '-0.117503'),
20(6, 'Alexandra Palace', 'Wood Green, London  N22<br/>30 Oct 2010 : Lynx All-Nighter', '51.596490', '-0.109514');
When you have a MySQL database with Geocoded content you’re ready to proceed.

Extracting from MySQL

Next thing is to create a small piece of PHP that can connect and extract data from MySQL
01// connection to mysql
02 
03<?
04$dbname            ='<database name>'; //Name of the database
05$dbuser            ='<database username>'; //Username for the db
06$dbpass            ='<database password>'; //Password for the db
07$dbserver        ='<database server>'; //Name of the mysql server
08 
09$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
10mysql_select_db("$dbname") or die(mysql_error());
11?>
12 
13// extracting and looping through data
14 
15<?
16 $query = mysql_query("SELECT * FROM poi_example");
17 while ($row = mysql_fetch_array($query)){
18 $name=$row['name'];
19 $lat=$row['lat'];
20 $lon=$row['lon'];
21 $desc=$row['desc'];
22echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
23 }
24 ?>
As you can see, the output of the script is has the following format: “addMarker(lat, long, marker data);“, this is the marker format that you can use for adding multiple markers fir Google Maps API V3.

Google Maps API V3

Next thing is to embed the PHP code into the javascript required for displaying multiple infowindows in Google Map API V3.
For this example, we have used the code from August LI as inspiration.
The script has the following features:
  • “var icon”: specifies a customizable icon. In this example a icon from Google is used, but you can add your own icons as well
  • “var popup”: specifies the maximum width of the info window. In this case 300 pixels
  • “addMarker”: contains latitude and longitude of the points, and a possibility to display whatever HTML content you like in the info window that corresponds to each point.   In this example we’re just displaying a headline and description
  • The map automatically zooms and centers to the most detailed view where all the map markers can be displayed in the same map. This is automatically calculated based on the size of the map, and the locations of the map markers.
The most important limit of this script is, that this technique is primarily useful to display a limited amount of map markers (below 100). If you’re going to display more points, you should consider a marker cluster solution.
The final script with the PHP and javascript code merged looks like this:
01<?
02$dbname            ='insert mysql database name'; //Name of the database
03$dbuser            ='insert mysql user name'; //Username for the db
04$dbpass            ='insert mysql password'; //Password for the db
05$dbserver          ='insert mysql database server address'; //Name of the mysql server
06 
07$dbcnx = mysql_connect ("$dbserver", "$dbuser", "$dbpass");
08mysql_select_db("$dbname") or die(mysql_error());
09?>
10<html>
11 <head>
12 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
13 <title>Google Map API V3 with markers</title>
14 <style type="text/css">
15 body { font: normal 10pt Helvetica, Arial; }
16 #map { width: 350px; height: 300px; border: 0px; padding: 0px; }
17 </style>
18 <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
19 <script type="text/javascript">
20 //Sample code written by August Li
21 var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png",
22 new google.maps.Size(32, 32), new google.maps.Point(0, 0),
23 new google.maps.Point(16, 32));
24 var center = null;
25 var map = null;
26 var currentPopup;
27 var bounds = new google.maps.LatLngBounds();
28 function addMarker(lat, lng, info) {
29 var pt = new google.maps.LatLng(lat, lng);
30 bounds.extend(pt);
31 var marker = new google.maps.Marker({
32 position: pt,
33 icon: icon,
34 map: map
35 });
36 var popup = new google.maps.InfoWindow({
37 content: info,
38 maxWidth: 300
39 });
40 google.maps.event.addListener(marker, "click", function() {
41 if (currentPopup != null) {
42 currentPopup.close();
43 currentPopup = null;
44 }
45 popup.open(map, marker);
46 currentPopup = popup;
47 });
48 google.maps.event.addListener(popup, "closeclick", function() {
49 map.panTo(center);
50 currentPopup = null;
51 });
52 }
53 function initMap() {
54 map = new google.maps.Map(document.getElementById("map"), {
55 center: new google.maps.LatLng(0, 0),
56 zoom: 14,
57 mapTypeId: google.maps.MapTypeId.ROADMAP,
58 mapTypeControl: false,
59 mapTypeControlOptions: {
60 style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
61 },
62 navigationControl: true,
63 navigationControlOptions: {
64 style: google.maps.NavigationControlStyle.SMALL
65 }
66 });
67 <?
68 $query = mysql_query("SELECT * FROM poi_example");
69 while ($row = mysql_fetch_array($query)){
70 $name=$row['name'];
71 $lat=$row['lat'];
72 $lon=$row['lon'];
73 $desc=$row['desc'];
74 echo ("addMarker($lat, $lon,'<b>$name</b><br/>$desc');\n");
75 }
76 ?>
77 center = bounds.getCenter();
78 map.fitBounds(bounds);
79 
80 }
81 </script>
82 </head>
83 <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
84 <div id="map"></div>
85 </html>
The final result looks like this:


Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)