We will be building this googla Map database using MYSQL. You can use any database you like like SQL server, Dbase, or any other.
Okay Let’s Get started first. We will define the table as:

CREATE TABLE `dpages` (
  `did` int(11) NOT NULL auto_increment,
  `pagename` varchar(255) default NULL,
  `contents` longtext,
  `catID` int(11) default NULL,
  `parentID` bigint(255) default NULL,
  `cityID` bigint(20) default NULL,
  `status` mediumint(9) default NULL,
  `t_url` varchar(255) default NULL,
  `address` longtext,
  `latitute` float(10,6) default NULL,
  `longitute` float(10,6) default NULL,
PRIMARY KEY (`did`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1;


Okay we have the defined the base Table.
Now we will define the categories table which will contain our categories as:

CREATE TABLE `categories` (
  `catID` int(11) NOT NULL auto_increment,
  `catName` varchar(255) default NULL,
  `parentID` int(11) default '0',
  PRIMARY KEY (`catID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;


Now we have defined our both tables with which we will be working now lets gets started:
In table 1 we assume that we have some 20 records and in table two we assume that we have some 10 categories:
Now if u see in table two we have defined the categories CatID and ParentID. We have more than 40 records but 10 records are those who parented is 0 or NULL. I mean to say thay rae the base main categories:
Let’s Jump to the Code Now:


First we will define the Categories in a Page as like this:
<table align="center" width="100%">
  <tr><td>
  <cfif isDefined('form.getmarkers')>
  <cfinclude template="getmap.cfm">
  </cfif>

  </td></tr>
  <tr><td>
  <cfinvoke component="cfc.details" method="getCats" returnvariable="Stuff"/>
  <table width="100%" border="0" cellspacing="2" cellpadding="1">
  <cfform method="post" action="#cgi.SCRIPT_NAME#?#cgi.QUERY_STRING#"> 
  <cfoutput query="stuff">
  <cfif variables.newrow EQ true>
  <tr>
  </cfif>
  <td><cfinput type="checkbox" name="categories" value="#catID#">&nbsp;#catName#</td>
  <cfif Stuff.currentRow MOD 4 EQ 0>
  </tr>
  <cfset variables.newrow = true>
  <cfelse>
  <cfset variables.newrow = false>
  </cfif>  
  </cfoutput>
  <tr>
  <td><input type="checkbox" name="checkall" onClick="checkboxes(this);" />Check All/Uncheck All </td>
  </tr>
  <tr>
  <td><cfinput type="submit" name="getmarkers" value="Show On Map" class="button"></td>
  </tr>
  </cfform>
  </table>
  </td></tr></table>


Ok now You will the code in red, Leave it for time being and concentrate on other part of the above code:
The code is just simple, we are just invoking the getcats method and populating the checkbox with its value:
The cfinvoke function will return us this stuff:


<cfquery datasource="#request.dsn#" username="#request.user#" password="#request.pass#" name="myset">
  SELECT categories.*
  FROM categories 
  WHERE parentID = <cfqueryparam cfsqltype="cf_sql_numeric" value="0">
  ORDER BY catID DESC </cfquery>


This query will run when we use the cfinvoke tag to fetch all the main categories whose parented is 0.
Ok we will jump to the RED Area.


<cfif isDefined('form.getmarkers')>
  <cfinclude template="getmap.cfm">
  </cfif>


Assume we selected all the checkboxes and now we want to see them on map.
On the click of the button we will trigger the GETMAP.cfm PAGE which will execute and show us all the necessary details:
This page is the meat and bone of the Map:
We have everything on this page:
Now let’s see the Code:


We have defined the extention we will be using to store our xml data


<cfparam name="ext" default=".xml">
Now we will invoke the CFC to fetch all the records of the categories selected
<cfinvoke component=”cfc.tools" method="getforMap" catID="#trim(form.categories)#" returnvariable="showdeal"/>
The Actual Query is like this in CFC
<cffunction access="public" name="getforMap" returntype="query">
  <cfargument name="catID" default="" required="no">
  <cfset var myset = "">
  <cfquery datasource="#request.dsn#" username="#request.user#" password="#request.pass#" name="myset">
  Select table1.* from where 
  CATID IN (<cfqueryparam cfsqltype="cf_sql_numeric" value="#trim(arguments.catID)#" list="yes">) 
  OR parentID IN (<cfqueryparam cfsqltype="cf_sql_numeric" value="#trim(arguments.catID)#" list="yes">) 
  order by updatedon desc 
  </cfquery>
  <cfreturn myset>
  </cffunction>


Now we are defining one folder where we will store our XML File
<cfset dirName = "common">
<cfset Directory = "#dirName#">
<cfset UploadDir2 = ExpandPath("xml/#Directory#")>
<cfset TAB = Chr(9)>
<cfif NOT DirectoryExists(UploadDir2)>
  <cfdirectory action="create" directory="#UploadDir2#" mode="777">
</cfif>


The above portion is quite clear as we are defining a new folder Common and then creating it dynamically if the folder does not exists
The below is the script we get from Google Maps API, once we sign Up

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=urkey" type="text/javascript"></script>
  <body onUnload="GUnload()">


Now Here we will be using the address, longitude, latitude and other details we stored in the database for each and every record. You see I am just looping over the records to fetch each rows respective details


<cfoutput>  
  <cfset xmlGoogle = xmlNew("no")>
  <cfset xmlGoogle.xmlRoot = xmlElemNew(xmlGoogle, "markering")>
  <cfloop index="i" from="1" to="#showdeal.recordCount#">
  <cfset xmlGoogle.xmlRoot.xmlChildren[i] = xmlElemNew(xmlGoogle, "marker")>
  <cfset xmlGoogle.xmlRoot.xmlChildren[i].xmlAttributes["pagename"] = showdeal.pagename[i]>
  <cfset xmlGoogle.xmlRoot.xmlChildren[i].xmlAttributes["address"] = Left(showdeal.address[i],50)>
  <cfset xmlGoogle.xmlRoot.xmlChildren[i].xmlAttributes["latitude"] = showdeal.latitute[i]>
  <cfset xmlGoogle.xmlRoot.xmlChildren[i].xmlAttributes["longitude"] = showdeal.longitute[i]>
  </cfloop>


We will write the fetched xml details in a XML file using the cffile write attribute. This will create the XML file in the Directory we specified above as XML/common


  <cffile action="write" file="#UploadDir2#\#dirName##ext#" output="#toString(xmlGoogle)#">
Now we will begin with the actual work of Google Maps  
<div id="tab1" style="color:black;">
  <div id="map_1" style="width:100%; height:400px;z-index:0;">&nbsp;</div>
  <div id="side_bar" style="visibility:hidden; position:absolute;color:black;z-index:0;"></div>
  <noscript>
  <b>JavaScript must be enabled in order for you to use Google Maps.</b> However, it seems JavaScript is either disabled or not supported by your browser. 
  To view Google Maps, enable JavaScript by changing your browser options, and then 
  try again.
  </noscript>
  <script type="text/javascript">
  //<![CDATA[

  if (GBrowserIsCompatible()) {
  // this variable will collect the html which will eventualkly be placed in the side_bar
  var side_bar_html = "";
   
  // arrays to hold copies of the markers used by the side_bar
  // because the function closure trick doesnt work there
  var gmarkers = [];
  var i = 0;


  // A function to create the marker and set up the event window
  function createMarker(point,name,html) {
  var marker = new GMarker(point);
  GEvent.addListener(marker, "click", function() {
  marker.openInfoWindowHtml(html);
  });
  // save the info we need to use later for the side_bar
  gmarkers[i] = marker;
  // add a line to the side_bar html
  side_bar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
  i++;
  return marker;
  }


  // This function picks up the click and opens the corresponding info window
  function myclick(i) {
  GEvent.trigger(gmarkers[i], "click");
  }


  // create the map
  var map = new GMap2(document.getElementById("map_1"));
  map.addControl(new GLargeMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng( 31.796282,77.314832), 5);
  


  // Read the data from xml File
  var request = GXmlHttp.create();
  request.open("GET", "xml/#dirName#/#dirName##ext#", true);
  request.onreadystatechange = function() {
  if (request.readyState == 4) {
  var xmlDoc = GXml.parse(request.responseText);
  // obtain the array of markers and loop through it
  var markers = xmlDoc.documentElement.getElementsByTagName("marker");
   
  for (var i = 0; i < markers.length; i++) {
  // obtain the attribues of each marker
  var lat = parseFloat(markers[i].getAttribute("latitude"));
  var lng = parseFloat(markers[i].getAttribute("longitude"));
  var point = new GLatLng(lat,lng);
  var html = markers[i].getAttribute("pagename");
  var label = markers[i].getAttribute("address");
  // create the marker
  html = html + '<br>' + label;
  var marker = createMarker(point,label,html);
  map.addOverlay(marker);
  }
  // put the assembled side_bar_html contents into the side_bar div
  document.getElementById("side_bar").innerHTML = side_bar_html;
  }
  }
  request.send(null);
  }

  else {
  alert("Sorry, the Google Maps API is not compatible with this browser");
  }
  //]]>
  </script>
  </div>
</cfoutput>
</body>

The Lines which are color Coded are just comments for better understanding of you Guys!


The area above in the <Script>tag where we are calling the dynamically created file will fetch all the records fom the XML and we will get all the markers listed on the website’s Google Map.
It is till that much.Simple and easy.
Stuck Somewhere mail me @: webmaster@randhawaworld.com

Cheers

About This Tutorial
Author: Gurpreet Singh Randhawa
Skill Level: Beginner 
 
 
 
Platforms Tested: CFMX,CF8
Total Views: 72,104
Submission Date: August 24, 2009
Last Update Date: August 24, 2009
All Tutorials By This Autor: 9
Discuss This Tutorial
Advertisement


Website Designed and Developed by Pablo Varando.