This project is read-only.

GoogleMap Control capture position sample

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

Capture Position Sample

To capture position of any point on google map you have to register client-side code for OnClientClick.
The javascript function which will handle client click should look like:
function <NAME>(overlay, point) {
<YOUR CODE HERE>
}

  • Markup
<script type="text/javascript">
    function __showInfo(overlay, point) {
        if(point) {
            var info = document.getElementById('__info');
            info.innerHTML = point.lat() + '/' + point.lng();
        }
    }
</script>
<h1>
    Capture Position Sample
</h1>
<p>
    Find an address and then click on the map to find position of the point.</p>
<hr style="visibility: hidden;" />
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upTest">
    <ContentTemplate>
        Find Address
        <asp:TextBox ID="_txtAddress" runat="server"></asp:TextBox>
        <asp:Button ID="_btnShow" runat="server" Text="Show" />
        <span id="__info" style="background-color: #EEE; color: #009; padding: 0px 4px 0px 4px; border: solid 1px #999;">Position</span>
        <hr style="visibility: hidden;" />
        <artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="560px" Latitude="42.1229" Longitude="24.7879"
            Zoom="4" OnClientClick="__showInfo">
        </artem:GoogleMap>
    </ContentTemplate>
</asp:UpdatePanel>

  • Code-behind
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Artem.Web.UI.Controls;

public partial class googlemap_Capture : System.Web.UI.Page {

    protected override void OnLoad(EventArgs e) {
        base.OnLoad(e);
        //
        if (IsPostBack) {
            string address = _txtAddress.Text;
            GoogleMap1.Address = address;
            GoogleMap1.Markers.Clear();
            GoogleMap1.Markers.Add(new GoogleMarker(address, "Address: " + address));
        }
    }
}


Note the check of point above in javascript function __showInfo.
That is required, if you have markers on the map and want capture to work with them.

That's all folks.
You can take a look at sample live here and watch the video 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 Feb 23, 2008 at 7:33 PM by velio, version 4

Comments

velio Feb 23, 2008 at 7:36 PM 
Hi,
I have update the sample with respect to last changes/releases.

dziedrius Feb 20, 2008 at 7:29 PM 
ok, i see, that event names changed after last version.
anyway, may be you could post server side sample also for getting position?

dziedrius Feb 20, 2008 at 6:49 PM 
can't find event/property OnMapClick?