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 UpFor 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:
- 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.
<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
hereHappy coding ...Any smart ideas and comments are welcome.
Please do not hesitate to question meSee more about me and my works under
ArtemBG |
WebUtil.net