Dynamic Ajax Content

This script uses Ajax to enable you to load external pages into a DIV without having to reload the browser or use IFRAMES. If your external pages reference any external .css or .js files for styling, this script can also load and apply them to the page on demand.

Step 1: Insert the below script into the JabvaScrip tag of the HEAD section of your page:

(here i created an test.html)

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)

var loadedobjects=”"

var rootdomain=”http://”+window.location.hostname

var bustcacheparameter=”"

function ajaxpage(url, containerid){

var page_request = false

if (window.XMLHttpRequest) // if Mozilla, Safari etc

page_request = new XMLHttpRequest()

else if (window.ActiveXObject){ // if IE

try {

page_request = new ActiveXObject(“Msxml2.XMLHTTP”)

}

catch (e){

try{

page_request = new ActiveXObject(“Microsoft.XMLHTTP”)

}

catch (e){}

}

}

else

return false

page_request.onreadystatechange=function(){

loadpage(page_request, containerid)

}

if (bustcachevar) //if bust caching of external page

bustcacheparameter=(url.indexOf(“?”)!=-1)? “&”+new Date().getTime() : “?”+new Date().getTime()

page_request.open(‘GET’, url+bustcacheparameter, true)

page_request.send(null)

}

function loadpage(page_request, containerid){

if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf(“http”)==-1))

document.getElementById(containerid).innerHTML=page_request.responseText

}

function loadobjs(){

if (!document.getElementById)

return

for (i=0; i

var file=arguments[i]

var fileref=”"

if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding

if (file.indexOf(“.js”)!=-1){ //If object is a js file

fileref=document.createElement(‘script’)

fileref.setAttribute(“type”,”text/javascript”);

fileref.setAttribute(“src”, file);

}

else if (file.indexOf(“.css”)!=-1){ //If object is a css file

fileref=document.createElement(“link”)

fileref.setAttribute(“rel”, “stylesheet”);

fileref.setAttribute(“type”, “text/css”);

fileref.setAttribute(“href”, file);

}

}

if (fileref!=”"){

document.getElementsByTagName(“head”).item(0).appendChild(fileref)

loadedobjects+=file+” ” //Remember this object as being already added to page

}

}

}

Step 2: Once that’s done, simply create links that will load an external page into the desired DIV or container using one of the below syntax:

href=”javascript:ajaxpage(‘test.htm’, ‘contentarea’);”

Google Maps API – Add Google Maps to your Website

For this you should have google account. And here I am going to show this in my own style.

First you need to get a key provided by google map. If you have an account please visit here http://code.google.com/apis/maps/signup.html and register for your site.

Register and get your key

soon you will see a figure like the following one

Your key

Just copy the key and save it into another file. we have to use it later

Now create a html file and insert the following code into the head tag and paste the key that you got earlier into the following script tag(marked into red).Also enable sensor attribute true.

// <!–[CDATA[src=]]–>“http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAA1dZJ-PSW_glg7rB_4GV95RSTCuQvUh_A4ojjSPFa8jwqHtcfRxSD3YQu7WirUkxhGjVrZWiDi6_DMQ” type=”text/javascript”></script>

<script language=”Javascript” type=”text/javascript”>
var map = null;
var geocoder = null;

function load() {
if (GBrowserIsCompatible()) {

map = new GMap2(document.getElementById(“map”));
map.setCenter(new GLatLng(23.793096,90.401419), 14);
geocoder = new GClientGeocoder();

map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());

var address=’

Arial, Helvetica, sans-serif; color:#002762; font-size:12px”>
House: 67/A, Road: 4, Block: C
Banani, Dhaka – 1213, Bangladesh
Phone: +88028861282, +88028861239

‘;

var point;
point = new GLatLng(23.793096,90.401419);
var marker = new GMarker(point);
map.addOverlay(marker);
//map.setMapType(G_HYBRID_MAP);

GEvent.addListener(marker, “click”, function() {
marker.openInfoWindowHtml(address);});
marker.openInfoWindowHtml(address);
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + ” not found”);
} else {
map.setCenter(point, 14);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>

N.B. in the GLatLng() method you have to put your own location. for this you need trace your location first and you have to get your Latitude and Longitude first.

You can call this page from anywhere you want. Please dont forget the key and Latitude Longitude