After showing how to load Google map in your asp.net page in
this article, we will move to dealing with map marker and its properties.
Marker used to specify location using coordinates, called Longitude and Latitude.
to load marker in your map, just add the following script:
function initialize() {
// initial location of marker
var myCoordinates;
var marker;
var mapOptions = {
// 24, 47 is saudi arabia coordinates
center: new google.maps.LatLng(24, 47),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);
// initial location of marker
myCoordinates = new google.maps.LatLng(24, 47);
// set marker properties
marker = new google.maps.Marker({
position: myCoordinates,
map: map,
draggable: true
});
}
google.maps.event.addDomListener(window, 'load', initialize);
if you play this page, you will get draggable marker in your map:
if you want marker read-only, just change the property of marker:
draggable : false
Now, we want to show coordinates( longitude and latitude ) in text boxes. Just add the following texts inside html body:
<input id="txtLat" type="text" runat="server" />
<input id="txtLong" type="text" runat="server" />
and add the following listener to your script (inside initialize() method):
google.maps.event.addListener(marker, 'drag', function () {
document.getElementById("<% =txtLat.ClientID %>").value = marker.position.lat().toString();
document.getElementById("<% =txtLong.ClientID %>").value = marker.position.lng().toString();
});
then play your page, and try to move marker, you will get the following:
there is a lot of events of marker, one of them 'dragend', which will called after marker dragged, 'click' .. etc.
