Dealing With Google Maps - ASP.NET - Part (2)

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.