How to implement my own analog of Google Maps' "drop a pin" functionality?

I have a web-app (ASP.NET/C#) that I sell as SAAS. I want to implement "mapping" functionality with the following requirements:

User uploads an image (map) (this is a one-time action, the zoom/scroll are not required, user will have to scale the map to fit the screen)

The following steps can be repeated multiple times:

1. User selects a location on the map (by clicking on it)
2. Location is saved to the database

Finally, user can view all previously selected locations (pins) at any given time (report)

All of the above is easily done with Google Maps, but Premier license is out of my price range.开发者_JAVA百科

I've found an easy way to capture the coordinates of the mouse click on the image by using ASP.NET's ImageButton control.

The hard part is marking the locations on the image (report).

I'm interested in suggestions on how to mark location on (over) the image given X,Y coordinates.

Alternative approaches would be appreciated.

Generate relatively poitioned container <asp:Panel style="position:relative" runat="server" ID="imagePanel">...</asp:Panel> over the image button, add several absolutely positioned image controls inside on each load - something like

foreach(var point in points)
{
    var image = new System.Web.UI.WebControls.Image { ImageUrl = "/pin.jpg" };
    image.Style.Value = string.format("position:absolute;top:{0}px;left:{1}px;display:block;width:30px; height:30px;", point.X, point.Y);
    imagePanel.Controls.Add(image);
}

not sure actually that's the best way to catch coordinates using ImageButton - i'd better make onclick handler for the map to get click coordinates, and ajax request (using for instance jquery in both cases) to save that on server, and to generate the pins using the data passed from your database.