Friday, 11 April 2014

Get Latitdue and longitude from google map

Code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://maps.google.com/maps?file=api&v=2&key=" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
 $("#map").show();
 show_popup();
});


function show_popup(){
 $("#map").show();
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
var center = new GLatLng(11.00, 78.00);
map.setCenter(center, 7);
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);
});
});
}
}
</script>
<table align='center'>
<tr>
<td><label>Latitude</label></td>
<td><label>:</label></td>
<td><input type="text" name="latitude" id="lat" onclick="show_popup();" readonly value=""/>
<em></em>
</td>
<td><label>Longitude</label></td>
<td><label>:</label></td>
<td><input type="text" name="longitude" onclick="show_popup();" id="lng" readonly value=""/>
<em></em>
</td>
</tr>
<tr><td colspan='6'><div align="center" id="map" style="width:700px;height:450px;-webkit-border-radius: 18px 20px 20px 20px;-moz-border-radius: 18px 20px 20px 20px;border-radius: 18px 20px 20px 20px;border:2px solid #82B5CF;background:rgba(231,228,237,0.5);"></div></td></tr>
</table>

No comments:

Post a Comment