07 December 2008

Generate Google Maps Dynamically

Generate Google Maps Dynamically using SQL database

Google Maps - have become an essential part of web development. Almost every client here and there is now requesting for some of the Google Map functionality to be incorporated into their web site. A common place for Google Maps is on the Contact US pages. Here's the detailed for all your need.

The following illustrate the use of Google Map API to dynamically generate the required points who's details are stored in the database and each points are selected using SQL Queries

// JavaScript Document
//Code for google maps to dynamically add various points, set their center and set auto zoom levels
//Also change the icons

<script type="text/javascript" language="javascript">

var iconBlue = new GIcon();
iconBlue.image = 'http://labs.google.com/ridefinder/images/mm_20_blue.png';
iconBlue.shadow = 'http://labs.google.com/ridefinder/images/mm_20_shadow.png';
iconBlue.iconSize = new GSize(12, 20);
iconBlue.shadowSize = new GSize(22, 20);
iconBlue.iconAnchor = new GPoint(6, 20);
iconBlue.infoWindowAnchor = new GPoint(5, 1);


var iconRed = new GIcon(G_DEFAULT_ICON);
iconRed.shadow = 'http://www.google.com/mapfiles/shadow50.png';

iconRed.iconSize = new GSize(20, 34);
iconRed.shadowSize = new GSize(37, 34);
iconRed.iconAnchor = new GPoint(9, 34);
iconRed.infoWindowAnchor = new GPoint(9, 2);


// this function has to be called when page loads..FOR IE facing Operation aborted problem call this function at end of page before </body> tag & make sure google map version is 2.118 or greater.
function load()
{
if (GBrowserIsCompatible())
{

var queryparameters="";

var map = new GMap2(document.getElementById("mapsearch"));//name of maps div on page.must be unique
var bounds = new GLatLngBounds();
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

map.setCenter(new GLatLng(0,0, 15); //temporaray center

GDownloadUrl("getCoordinates.php?"+queryparameters, function(data) {

var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++)
{
//sample XML file data retrieved from getCoordinates.php which fires a query and generates an XML file that is echoed back;

//below is all the data tto be shown in ballon on the map
var CenterName = markers[i].getAttribute("CenterName").replace("'", "′");
var Street = markers[i].getAttribute("Street").replace("'", "′");
var City = markers[i].getAttribute("City").replace("'", "′");
var State = markers[i].getAttribute("State").replace("'", "′");
var ZipCode = markers[i].getAttribute("ZipCode");
var Phone = markers[i].getAttribute("Phone");
var Website = markers[i].getAttribute("Website");
var point = new GLatLng(parseFloat(markers[i].getAttribute("latitude")),
parseFloat(markers[i].getAttribute("langitude")));


var marker = createMarker(point,CenterName,Street,City,State,ZipCode,i);
map.addOverlay(marker);
bounds.extend(point);
//marker.setImage('../markerIcons/largeTDBlueIcons/blank.png'); can be used for single image
}

//these functions automatically set the zoom levels and map center
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
});

}
}

function redirect(CenterName,Street,City,State,ZipCode,point)
{

window.open("http://maps.google.com/maps?near="+Street+","+City+","+State + " "+ ZipCode+"&geocode=CTmv3KDtfEkVFUq6QgIdO865-CHwxO4kUuJYPQ&q=" + document.getElementById('txtsearch').value +"&f=li&hl=en&dq=shopping+centers+loc:"+Street+"&sll="+point);

}

function createMarker(point,CenterName,Street,City,State,ZipCode,index)
{

//Select a marker icon dynamically palced on server
var letter = String.fromCharCode("A".charCodeAt(0) + index); //for lettered icons
var num=index+1; //for numbered icons
var letteredIcon = new GIcon(iconRed);
letteredIcon.image = "../markerIcons/largeTDBlueIcons/marker" + num + ".png"; //location of icon image

// Set up our GMarkerOptions object

markerOptions = { icon:letteredIcon };
var marker = new GMarker(point, markerOptions);

var to_str="http://maps.google.com/maps?li=d&hl=en&f=d&iwstate1=dir:to&daddr="+Street+","+City+","+State+" "+ZipCode+"&iwloc=1";
var from_str="http://maps.google.com/maps?li=d&hl=en&f=d&saddr="+Street+","+City+","+State+" "+ZipCode+"&iwstate1=dir:from&iwloc=1";

var html = "<b>" + CenterName + "</b><br/>" + Street + "<br/>" + City + "," + State + " " + ZipCode + "<br/><br/>Get Direction:<a href='"+to_str+"' target='_blank'>To Here </a> <a href='"+from_str+"' target='_blank'>From Here</a><br/> Search near:<input type='text' name='txtsearch' id='txtsearch' value='' /><input type='button' name='Search' id='Search' value='Search' onclick='redirect(\""+CenterName+"\",\""+Street+"\",\""+City+"\",\""+State+"\",\""+ZipCode+"\",\""+point+"\");'/>" ;

GEvent.addListener(marker, 'click', function(){
marker.openInfoWindowHtml(html);
});

return marker;
}

</script>

1 comment:

Anonymous said...

Where should we call the Javascript function and how should we pass Sql database data to the javascript functions above