<script src="http://maps.google.com/maps?file=api&v=2&key=API_KEY" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
//map.setUIToDefault(); //Load the Map type bars
var customUI = map.getDefaultUI();
customUI.zoom.scrollwheel = false;
map.setUI(customUI);
var center = new GLatLng(-22.98699983834975,-43.210344314575195);
map.setCenter(center, 18);
//geocoder = new GClientGeocoder();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").value = center.lat().toFixed(5);
document.getElementById("lng").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point = marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = point.lat().toFixed(5);
document.getElementById("lng").value = point.lng().toFixed(5);
});
GEvent.addListener(map, "moveend", function() {
map.clearOverlays();
var center = map.getCenter();
var marker = new GMarker(center, {draggable: true});
map.addOverlay(marker);
document.getElementById("lat").value = center.lat().toFixed(5);
document.getElementById("lng").value = center.lng().toFixed(5);
GEvent.addListener(marker, "dragend", function() {
var point =marker.getPoint();
map.panTo(point);
document.getElementById("lat").value = point.lat().toFixed(5);
document.getElementById("lng").value = point.lng().toFixed(5);
});
});
map.enableGoogleBar(); //Enable the Google location search bar
}
}
</script>
HTML Section :
<body onload="initialize()">
<style>
#map
{
height: 350px;
width: 550px;
border:1px #0099FF solid;
}
</style>
<strong>Latitude: </strong>
<input type="text" name="GmapLattitude" id="lat" readonly value="" />
<strong>Longtitude: </strong>
<input type="text" name="GmapLongtitude" id="lng" readonly value="" />
<br />
<div id="map">
<div align="center" style="padding-top:40px;">No Map Data</div>
</div>
</body>
No comments:
Post a Comment