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