How to integrate google map in to your website?
As I developed my college project "Programmer's Zone Discussion Forum" in this I implemented the Google Map. Google map is most useful services provided by Google, When I search my village name in map.google.com then I realize that the mapping Is not limited to only big cities it's also spread up to small villages.
I decide write this article so other students can use Google Map and implements in their website. Most website uses the Google Map to attract the visitors. Let's start with small tutorial.
Requirements:
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:
http://www.google.com/apis/maps/signup.html
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
-- 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 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="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
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 decreasing the height and width value of <div> tag-->
</body>
</html>
Step 4:You can customized the map view and database location information based on your requirements.
|
| Author: subhashree 12 Apr 2012 | Member Level: Bronze Points : 0 |
Hi.The infowindow pop up is showing by default.How can I remove it?
|