Goggle Maps Examples

Marker draggable with coordinates

Written to div with jQuery

Tools, Resources

Loading ...
<div id="mapCanvas" style="width:430px;height:400px">Loading ...</div>

<script type="text/javascript">
function initialize() {
var latLng = new google.maps.LatLng(-23.527571,-46.678459);
var myOptions = {
zoom: 19,
center: latLng,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
}
var map = new google.maps.Map(document.getElementById("mapCanvas"), myOptions);

var marker = new google.maps.Marker({
position: latLng,
map: map,
draggable: true
});

google.maps.event.addListener(marker,'dragend',function(marker){
codeLatLng(marker.latLng);
});

function codeLatLng(latlng) {
$("#lat").html("<strong>Lat:</strong> "+latlng.lat());
$("#lng").html("<strong>Lng:</strong> "+latlng.lng())
}

}

</script>