This project is read-only.

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 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
  • 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

  • Markup
<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>
  • 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_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 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 22, 2008 at 8:30 PM by velio, version 7

Comments

dotnet3 Apr 21, 2008 at 9:21 PM 
you above example link does not work.
I entered the address to search and it returns nothing and the map is grayed out