Posts
step1: copy and past the below code in file manger of the free hosting site
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<marquee>enter and get your location</marquee>
<title>Google Maps API Example: Simple Geocoding</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxSPW5CJgpdgO_s4yyMovOaVh_KvvhSfpvagV18eOyDWu7VytS6Bi1CWxw"
type="text/javascript"></script> /* this is the api whcih connect to google mapss */
<script type="text/javascript">
var map = null;
var geocoder = null;
function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 1);
map.setUIToDefault();
geocoder = new GClientGeocoder();
}
}
function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + " not found");/* if wrong address entered */
} else {
map.setCenter(point, 15);
var marker = new GMarker(point, {draggable: true});
map.addOverlay(marker);
GEvent.addListener(marker, "dragend", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(marker.getLatLng().toUrlValue(6));
});
GEvent.trigger(marker, "click");
}
}
);
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()"> /* this line will intiliaze the geocode function */
<form action="#" onsubmit="showAddress(this.address.value); return false"> /*this line will display the address by getting the value from address.value on submit*/
<p>
Enter an address, and then drag the marker to tweak the location.
<br/>
The latitude/longitude will appear in the in of window after each geocode/drag.
</p>
<p>
<input type="text" style="width:350px" name="address" value="413 Bazaar street, salem" />
<input type="submit" value="Go!" />
</p>
<div id="map_canvas" style="width: 600px; height: 800px"></div>
</form>
</body>
</html>
No comments:
Post a Comment