Prerequisites
No special development tools are required in order to take advantage of Google's mapping API; all that is necessary is a text editor, Web browser, and a public Web server from which the scripts can be served. Note the server must be public, you can't develop on an internal server, as each request must communicate with the Google mapping server in order to work correctly. You will however need an API key provided by Google so that usage quotas can be monitored. Begin by reading through some of the usage rules and applying for the key here
http://www.google.com/apis/maps/signup.html
(You can run this on localhost also)
You'll need to confirm registration by clicking on link provided by you via email, at which time the API key will be provided to you. Paste this key into a text file, as you'll need to integrate it into the scripts used to create the maps.
The Steps are Below
Step 1: Create Database named "gmap".
Step 2: Create Table (copy the below code and execute in query window)
-- phpMyAdmin SQL Dump
-- version 3.1.1
-- http://www.phpmyadmin.net
--
-- 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 php file on localhost.
<?php
mysql_connect("localhost","root");
mysql_select_db("gmap");//connection with database
?>
<html>
<head>
<?php
$google_key = ''; //Your Key
?>
<script src="http://maps.google.com/maps?file=api&v=2&key=<?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 = "http://www.google.com/mapfiles/marker.png";
icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";
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
// for(var i = 0; i < newpoints.length; i++) {
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>
<!--You can reduce the size of map by decresing the height and width value of <div> tag-->
</body>
</html>
Step 4: You can customized the map view and database location info.