Calculate Latitude-Longitude using Google API

Google API provide a nifty tool for calculations the latitude and longitude of the place based upon the address. These geographical data can be used for Google Map Generation. Make sure that you read the Google Maps API documents before starting.

//code for using google maps to calculate latitude and longitude dynamically

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

var geocoder;
var map;
var xmlHttp;

// 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()
{
map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(0,0), 8);//temporay center
geocoder = new GClientGeocoder();
}

//call this function after validations have been performed and true
function showAddress(address)
{
var flag_addr1=0;
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
if (geocoder)
{

geocoder.getLatLng(address, function(point)
{

if (!point)
{
alert("Address " +address+" not found");
flag_addr1 = 0;

}
else
{

//hidden fields on the webform , inside a form(postback values used for updating database)
document.getElementById("lat").value = point.lat().toFixed(5);
document.getElementById("lng").value = point.lng().toFixed(5);
flag_addr1 = 1;
//setTimeout("document.frm_add_place.submit()",2000);

document.frm_add_place.submit(); //used to submit form only when correct address is found

}
}
);
}

}
</script>

Note: You can call the showAddress() JavaScript function before a user submits a form and pass values entered by user like state,city,zip code, street address.
The values in the hidden fields lat,lng can be used to store in database for dynamic map generation.

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>