0

hi all, i am working on online food ordering project. restaurant create zones (circles based on miles as radies) to delivery the food. comapines registerd for food ordering. the company emplyees select there company we must display the restaurnt (Which are contaning this company in there zones).
any idea please help me.

thanks in advance.

2
Contributors
2
Replies
3
Views
7 Years
Discussion Span
Last Post by raju_boini525
0
(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.

Step 1: Create Database named "gmap".

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

Code:
-- 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.

Code:
<?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>

Executing this script from a Web server produces the following map 




Step 4: You can customized the map view and database location info.

it is code till you not understand then you
refear file i attach
then also you not undersatand

then you refear www.Hackforums.net site in this site tutorial is avaliable ok.
this code work defineately beacuse it work in my site

Edited by swi2: n/a

Attachments
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

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

thanks for reply, but i want to create circles google maps, do you have any idea, help me .

Edited by raju_boini525: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.