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.
  • Markup
<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>
  • Code
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:
  • ImageUrl - the url of the image used for custom icon;
  • ImageWidth - the width of the image in pixels (have in mind when using custom images as icons it is quite important to set width and height for better results);
  • ImageHeight - the height of the image in pixels;
  • ShadowUrl - the url of the image to be used as a shadow;
  • ShadowWidth - the width of the shadow image in pixels;
  • ShadowHeight - the hieght of the shadow image in pixels;
Here is a sample of how to use them.
  • Markup
<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>
  • Code
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

Last edited Jan 26, 2008 at 7:50 PM by velio, version 4

Comments

lstanczyk Apr 2, 2013 at 4:46 PM 
How can I get the position of the marker after drag is complete?