PHP Geocoding tutorial with the Google Maps API – Part One


No special programming skills are required in order to take advantage of Google’s mapping API (Application Programming Interface). All you need is a text editor, Web browser, and a Web server such as XAMPP, WAMP or IIS from where the scripts can be executed. Each request must communicate with the Google mapping server in order to work correctly and load map correctly. You will also need an API KEY provided by Google. Begin with getting google MAP API KEY:

Read the documentation given on above link and learn how the map can be simplifying your life. After signup, confirm registration by clicking on link provided by you via email, at which time the API key will be provided to you. Store this key into a text file, because you’ll need to integrate it into the scripts used to create the maps.

Now I am going to explain Step by Step how you implement the Google Map.

Step 1: Create Database named “gmap” in XAMPP->PHPMyAdmin.

Step 2: Create Table province (copy the below code and execute in query window of XAMPP).

— phpMyAdmin SQL Dump — version 3.1.1 — — — Host: localhost — Generation Time: Apr 08, 2010 at 06:50 PM — Server version: 5.1.30 — PHP Version: 5.2.8 SET SQL_MODE=”NO_AUTO_VALUE_ON_ZERO”; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; — — Database: `gmap` — — ——————————————————– — — Table structure for table `province` — CREATE TABLE IF NOT EXISTS `province` ( `id` int(10) unsigned NOT NULL AUTO_INCREMENT, `province` varchar(125) NOT NULL, `code` varchar(5) NOT NULL, `area` varchar(45) DEFAULT NULL, `latitude` float DEFAULT NULL, `longitude` float DEFAULT NULL, `pincode` int(6) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=108 ; — — Dumping data for table `province` — INSERT INTO `province` (`id`, `province`, `code`, `area`, `latitude`, `longitude`, `pincode`) VALUES (1, ‘india’, ‘IN’, ‘Jamnagar’, 22.0247, 69.896, 361006), (2, ‘India’, ‘IN’, ‘Bhavnagar’, 21.7491, 72.0882, 364740), (3, ‘India’, ‘IN’, ‘Surat’, 21.2242, 72.8284, 395010), (4, ‘India’, ‘IN’, ‘Rajkot’, 22.3279, 70.8292, 360001), (5, ‘India’, ‘IN’, ‘North West Delhi’, 28.6586, 77.2308, 110006); Step 3: Create a file named “map.php” and copy the below code in it. Now run map.php file on Localhost. <?php mysql_connect(“localhost”,”root”); //connecting with host mysql_select_db(“gmap”);//connection with our database “gmap” ?> <html> <head> <?php $google_key = ”; //Your Key ?> <script src=”;?php echo $google_key;?>” type=”text/javascript”> </script> <script type=”text/javascript”> var newpoints = new Array(); //set The marker size and image icon0 = new GIcon(); icon0.image = “;; icon0.shadow = “;; icon0.iconSize = new GSize(20, 34); icon0.shadowSize = new GSize(37, 34); icon0.iconAnchor = new GPoint(9, 34); icon0.infoWindowAnchor = new GPoint(9, 2); icon0.infoShadowAnchor = new GPoint(18, 25); <?php //Fire queries to retrive the location data for database $gmap_city_sql=”SELECT * FROM province WHERE id=’2′”; $gmap_city_result=mysql_query($gmap_city_sql) or die(mysql_error()); $row=mysql_fetch_object($gmap_city_result); //Set the Map Lat and Log that is retrieved from database $i=0;echo “newpoints[{$i}]= new Array ({$row->latitude},{$row->longitude},icon0,”, ‘<b>”.addslashes($row->province).”, {$row->code}</b><br>”.addslashes($row->area).”‘);\n”; ?> //Initilize the Map function initialize() { if (GBrowserIsCompatible()) { var map = new GMap2(document.getElementById(“map_canvas”)); //get reference of div map.setCenter(new GLatLng(22.4642600,70.0690540),6); //Set Center Point as your Center Location map.addControl(new GSmallMapControl()); //add Map Movement control map.addControl(new GMapTypeControl()); //Add MapType Control In Our MAP map.addMapType(G_SATELLITE_3D_MAP); // Set Default MapType var point = new GPoint(newpoints[0][1],newpoints[0][0]); var popuphtml = newpoints[0][4] ; var marker = createMarker(point,newpoints[0][2],popuphtml); map.addOverlay(marker); } } //function to create Marker function createMarker(point, icon, popuphtml) { var popuphtml = ‘<div id=”popup”>’ + popuphtml + ‘</div>’; var marker = new GMarker(point, icon); marker.openInfoWindowHtml(popuphtml); //Display Marker on Map GEvent.addListener(marker, “click”, function() { marker.openInfoWindowHtml(popuphtml); }); return marker; } </script> </head > <body onLoad=”initialize()” > <div align=”center”> <div id=”map_canvas” style=”width: 400px; height: 400px”></div> </div> </body> </html> Step 4:You can customized the map view and database location information based on your requirements.

unwanted js error hide code


function silentErrorHandler() {return true;}

Did you like this resource? Share it with your friends and show your love!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s