Draggable Markers and Custom Icons

Before going further, I suppose you have installed the GoogleMap control to your web application/project.
Also make sure you have obtained a Google Maps API key for your web application.
You can do so on next url Google Maps API - Sign Up

For the basics of how to add control to the page, set with and height, google maps api key, zoom etc.,
check out the common samples' page

Draggable Markers

Because of the new property of markers Draggable, now is very easy to make a marker draggable.
All have to be done is to set Draggable to true.
By default markers are not draggable.
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" 
    Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
    Latitude="42.1229" Longitude="24.7879" Zoom="4">
    <Markers>
        <artem:GoogleMarker Draggable="true" Latitude="42.1229" Longitude="24.7879" 
            Text="This is my first draggable marker sample."/>
    </Markers>
</artem:GoogleMap>
protected void Page_Load(object sender, EventArgs e) {
    Artem.Web.UI.Controls.GoogleMarker marker = new Artem.Web.UI.Controls.GoogleMarker();
    marker.Draggable = true;
    marker.Latitude = 42.1229;
    marker.Longitude = 24.7879;
    marker.Text = "This is my first draggable marker sample.";
    GoogleMap1.Markers.Add(marker);
}

Custom Icons

GoogleMarker class was extended with a number a new property in order to enable using of cutom images for the markers' icons.
Here is the full list of the new properties which address custom icons: Here is a sample of how to use them.
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" 
    Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRjwQa_EwsI4RnwkJzBRa05i6lORBQctbwFxVw_HgGRbpDIgcY9TMlCab" 
    Latitude="42.1229" Longitude="24.7879" Zoom="4">
    <Markers>
        <artem:GoogleMarker Draggable="true" Latitude="42.1229" Longitude="24.7879" 
            Text="This is my first custom icons sample."
            ImageUrl="~/images/artem-logo.gif" ImageWidth="16" ImageHeight="16"/>
    </Markers>
</artem:GoogleMap>
protected void Page_Load(object sender, EventArgs e) {
    Artem.Web.UI.Controls.GoogleMarker marker = new Artem.Web.UI.Controls.GoogleMarker();
    marker.Draggable = true;
    marker.Latitude = 42.1229;
    marker.Longitude = 24.7879;
    marker.Text = "This is my first custom icons sample.";
    marker.ImageUrl = "~/images/artem-logo.gif";
    marker.ImageWidth = 16;
    marker.ImageHeight = 16;
    GoogleMap1.Markers.Add(marker);
}


That's all folks.
You can take a look at a working sample of all the code above here

Happy coding ...

Any smart ideas and comments are welcome. Please do not hesitate to question me
See more about me and my works under ArtemBG | WebUtil.net