GoogleMap Control geocoding 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 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
- Geocoding features
- Setting google map center point using geocoding
In order to set the center point of the google map using geocoding you have to use the new property of GoogleMap control - Address.
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRoUE3SabIoCOlXH37AOeIM5tsddhRFlUSAS7McYP97vBv9hxsuEq7lWw"
Address="plovdiv bulgaria" Zoom="5">
</artem:GoogleMap>
Have in mind, Address overrides Latitude and Longitude settings.
So, if you have Address, Latitude and Longitude set at same time, the Address (geocoding) will be applied.
- Add markers to you google map using geocoding
In addition to setting up the map center point using geocoding, you can add map markers as well.
To do so, you can use now the new GoogleMarker property Address:
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="560px" Height="600px" Key="ABQIAAAAyWjvj4t-s3JAHKCxqTvdRBRoUE3SabIoCOlXH37AOeIM5tsddhRFlUSAS7McYP97vBv9hxsuEq7lWw"
Address="plovdiv bulgaria" Zoom="5">
<Markers>
<artem:GoogleMarker Address="sofia bulgaria" Text="Sofia" />
<artem:GoogleMarker Address="beograd serbia" Text="Beograd" />
<artem:GoogleMarker Address="athens greece" Text="Athens" />
</Markers>
</artem:GoogleMap>
Have in mind, Address overrides Latitude and Longitude settings.
So, if you have Address, Latitude and Longitude set at same time, the Address (geocoding) will be applied.
Sample Page
<asp:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" AsyncPostBackTimeout="900">
</asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="upTest">
<ContentTemplate>
Address
<asp:TextBox ID="_txtAddress" runat="server"></asp:TextBox>
<asp:Button ID="_btnShow" runat="server" Text="Show" />
<artem:GoogleMap ID="GoogleMap1" runat="server" Width="800px" Height="560px" Latitude="42.1229" Longitude="24.7879"
Zoom="4" OnClientClick="__setLocation">
</artem:GoogleMap>
</ContentTemplate>
</asp:UpdatePanel>
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_Geocoding : 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));
}
}
}
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