Use PHP, MySql and Google Map API v3 for Displaying Data on Map

Use PHP, MySql and Google Map API v3 for displaying data on map By jhnidk | October 12, 2010 | Mapping, MySQL, PHP | 51 Comments inShare1

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. To see what we’re building, see live example here

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: 01 CREATE 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 14 INSERT INTO `poi_example` (`id`, `name`, `desc`, `lat`, `lon`) VALUES

(1, '100 Club', 'Oxford Street, London W1<br/>3 Nov 2010 : Buster Shuffle<br/>', '51.514980', '-0.144328'), (2, '93 Feet East', '150 Brick Lane, London E1 6RU<br/>7 Dec 16 2010 : Jenny & Johnny<br/>', '51.521710', '-0.071737'), 15

(3, 'Adelphi Theatre', 'The Strand, London WC2E 7NA<br/>11 Oct 2010 : Love Never Dies', '51.511010', '-0.120140'), (4, 'Albany, The', '240 Gt. Portland Street, London W1W 5QU', 18 '51.521620', '-0.143394'), 17

(5, 'Aldwych Theatre', 'Aldwych, London WC2B 4DF<br/>11 Oct 2010 : Dirty Dancing', '51.513170', '-0.117503'), (6, 'Alexandra Palace', 'Wood Green, London N22<br/>30 Oct 20 2010 : Lynx All-Nighter', '51.596490', '-0.109514'); 19

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 12 13 // extracting and looping through data 14 15 10 11 12 13 Google Map API V3 with markers 14 15 body { font: normal 10pt Helvetica, Arial; } 16 #map { width: 350px; height: 300px; border: 0px; padding: 0px; } 17

18



19 20 //Sample code written by August Li var icon = new 2 google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/b 1 lue.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