Tuesday, September 9, 2008

Google Maps JavaScript API Example

Hi...
Toady I'll describe you How to use google map in your own web site.It's very very simple..Just paste this in you HTML (design)of the as[x page.

[title]Google Maps JavaScript API Example[/title]

[script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAlE4RDKqdaG_395uP5F3n5BSgLbdfLkC76Qf-PydYQ5rbBnOoOBQ5b6VRo9cSRp89ONhWflXcFjLUkA"
type="text/javascript"][/script]

[script type="text/javascript"]
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
var address ='[%=address %]'
//address variable is usedused for the Address to be serched
//code behind declaretion of 'address' Varialbe as follows
//protected string address = string.Empty; in partial class.. give the value ot it in any Event.
showAddress(map, geocoder, address);
//showAddress(map, geocoder, "76 9th ave new york");
}
}

function showAddress(map, geocoder, address)
{
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not Valid Address ");

} else {

map.setCenter(point, 13);
var baseIcon = new GIcon();
baseIcon.shadow = "images/red_star.gif";

baseIcon.iconSize = new GSize(19, 18);
baseIcon.shadowSize = new GSize(19, 18);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);

// Creates a marker whose info window displays the letter corresponding
// to the given index.
function createMarker(point, index) {
// Create a lettered icon for this point using our icon class
var letter = String.fromCharCode("A".charCodeAt(0) + index);
var icon = new GIcon(baseIcon);
icon.image = "red_star.gif";
var marker = new GMarker(point, icon);

GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(address);
});
return marker;
}
map.addOverlay(createMarker(point, 13));
}
}
);
}
}
[/script]



With Love...
Sanjeev Kumar Chauhan

No comments: