jQuery Google Maps : Locate address of the Place where the marker is dragged and dropped :
Google maps seems to be very very interesting once we start exploring more and love for it has become to its extreme.As usual the maps is invoked and the view is set to terrain view using the map id 'google.maps.MapTypeId.TERRAIN' with zoom size 5 where the marker is drag and dropped,This post aids you to locate the address of the location that is achieved using the action 'getAddress' to retrieve the address and using the cal back we display it in the info window.
Google maps seems to be very very interesting once we start exploring more and love for it has become to its extreme.As usual the maps is invoked and the view is set to terrain view using the map id 'google.maps.MapTypeId.TERRAIN' with zoom size 5 where the marker is drag and dropped,This post aids you to locate the address of the location that is achieved using the action 'getAddress' to retrieve the address and using the cal back we display it in the info window.
<html>
<head>
<script type="text/javascript"
src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script type="text/javascript"
src="../gmap3.js"></script>
<style>
body {
text-align: center;
}
.gmap3 {
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 500px;
height: 250px;
}
</style>
<script type="text/javascript">
$(function(){
$('#test1').gmap3({
action: 'addMarker',
latLng: [21.7679,78.8718],
map:{
center: true,
zoom: 5,
mapTypeId: google.maps.MapTypeId.TERRAIN
},
marker:{
options:{
draggable:true
},
events:{
dragend: function(marker){
$(this).gmap3({
action:'getAddress',
latLng:marker.getPosition(),
callback:function(results){
var map = $(this).gmap3('get'),
infowindow = $(this).gmap3({action:'get', name:'infowindow'}),
content = results &&
results[1] ? results && results[1].formatted_address : 'no address';
if (infowindow){
infowindow.open(map, marker);
infowindow.setContent(content);
} else {
$(this).gmap3({action:'addinfowindow', anchor:marker,
options:{content: content}});
}
}
});
}
}
}
});
});
</script>
<body>
<div id="test1"
class="gmap3"></div>
drag & drop the marker
to see the address
</body>
</html>
No comments:
Post a Comment