How To Integrate Google Map In To Your Website


Now a days the google mapping is very popular because of it's usefulness in routine life. In this article I provides the step by step guide to integrate google map API in to your website.

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.

Google map

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.


Related Articles

How to prevent acne scars?

This article explains various measures which keep acne under control. This decreases inflammation and consequently chances of formation of acne scars too decreases. Actions like not picking at skin, proper hydration, using sunscreen lotions, proper skin care regime etc prevent formation of acne scars.

How To Control Anger?

Have you ever been angry and later on felt sad for being angry on some one or something? Do you want to control your anger ? Is anger good or not ? The following article will discuss about anger and measures through which we can control our anger.

How to remove blood stains from delicate fabrics and specific surfaces?

This article explains various tips and methods to get rid of blood stains from delicate fabrics like silk, satin, woolen, linen etc and from specific surfaces like concrete, hardwood floors, mattress, quilt, leather, carpets etc. These methods used can make them free from blood stains.

Top 9 tips and exercises to sharpen the mind and boost brainpower

The brain needs constant stimulation to remain alert and active. Practice good habits that can sharpen your memory and help you stay alert and on top of your game at all times. Simple lifestyle changes that involve the number of you sleep or what you eat or how you relax can play a great role in how your brain functions. Find out what you need to do right, to get the best out of your grey cells.

How to become a pathologist with top hospitals in India

Are you looking for a career in medicine as a clinical pathologist? Need to know how to start a pathology lab? This article provides complete information on the different specializations in pathology and a career guide on starting a career as a pathologist. You will also get a general idea on the approximate costs of setting up your own path lab.

More articles: How to

Comments



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: