Pessoal,
Neste post vou mostrar como você pode integrar a sua aplicação com o Google Maps.
Primeiro vamos entender qual a idéia dessa aplicação.
No banco de dados temos 2 tabelas “CIDADES” e “ESTADOS”
Nós vamos criar uma página de dados com as cidades e queremos que seja mostrado em nossa página uma mapa desta cidade, veja o resultado final:
Na definição de design da nossa página de cidades colocamos um IFRAME que será o container para a nosso mapa.
Note que o restante das definições é padrão do GASweb.
Nós criamos também uma tabela auxiliar para estados e estamos mostrando o estado usando fórmula do GASweb.
Vamos agora fazer a página de MAPAS.
Primeiro vamos criar um módulo de USERCONTROL, o objetivo é que você possa usar este mapa em outras páginas se precisar.
Neste USERCONTROL vamos colocar simplesmente um DIV e vamos chamalo de myMap.
Agora vem a parte da integração com a API do Google Maps, bem para fazer essa integração você vai precisar de uma KEY, que é uma chave fornecida pelo google para que você possa usar a API do google no seu site.
Pegue a chave neste endereço:http://code.google.com/intl/pt-BR/apis/maps/signup.html
Depois disso vamos colocar o código necessário para acesso a esta API.
Este código você deve colocar na guia C# do seu USERCONTROL
#region CÓDIGO DE USUARIO
public enum MapStyle
{
G_NORMAL_MAP,
G_SATELLITE_MAP,
G_HYBRID_MAP,
G_PHYSICAL_MAP
};
public int zoom { get; set; }
public string mapContainer { get; set; }
public MapStyle mapStyle { get; set; }
public decimal latitude { get; set; }
public decimal longitude { get; set; }
public bool pushPin { get; set; }
public string pushPinTitle { get; set; }
public string pushPinDescription { get; set; }
public string MapWidth { get; set; }
public string MapHeight { get; set; }
public string City { get; set; }
string Lt;
string Lg;
protected void Page_Load(object sender, EventArgs e)
{
GoogleMaps Mapas = new GoogleMaps("COLE AQUI A SUA CHAVE");
Mapas.GetLatLng(City);
Lt = Mapas.LatLang.Latitude;
Lg = Mapas.LatLang.Longitude;
InjectJavaScriptBingMaps();
}
public void InjectJavaScriptBingMaps()
{
StringBuilder javascriptFunction = new StringBuilder();
javascriptFunction.Append("getGoogleMaps(");
javascriptFunction.Append("'myMap',");
javascriptFunction.Append("" + Lt+",");// latitude.ToString(CultureInfo.InvariantCulture.NumberFormat) + ",");
javascriptFunction.Append("" + Lg+",");// longitude.ToString(CultureInfo.InvariantCulture.NumberFormat) + ",");
javascriptFunction.Append("" + zoom + ",");
javascriptFunction.Append("" + pushPin.ToString().ToLower() + ",");
javascriptFunction.Append("'" + pushPinTitle + "',");
javascriptFunction.Append("'" + pushPinDescription + "',");
javascriptFunction.Append("" + mapStyle + ",");
javascriptFunction.Append("'" + MapWidth + "',");
javascriptFunction.Append("'" + MapHeight + "'");
javascriptFunction.Append(");");
Page.ClientScript.RegisterStartupScript(GetType(), "Javascript", javascriptFunction.ToString(), true);
}
#endregion
#region CLASSES DO USUARIO
public class GoogleMaps
{
private string API_KEY = string.Empty;
public LatLng LatLang;
public GoogleMaps(string api_key)
{
this.API_KEY = api_key;
}
public void SetApiKey(string key)
{
if (string.IsNullOrEmpty(key))
{
throw new ArgumentException("API Key is invalid");
}
this.API_KEY = key;
}
/// <summary>
/// Perform a geocode lookup of an address
/// </summary>
/// <param name="addr">The address in CSV form line1, line2, postcode</param>
/// <param name="output">CSV or XML</param>
/// <returns>LatLng object</returns>
public LatLng GetLatLng(string addr)
{
var url = "http://maps.google.com/maps/geo?output=csv&key=" +
this.API_KEY + "&q=" + HttpContext.Current.Server.UrlEncode(addr);
var request = WebRequest.Create(url);
var response = (HttpWebResponse)request.GetResponse();
if (response.StatusCode == HttpStatusCode.OK)
{
var ms = new MemoryStream();
var responseStream = response.GetResponseStream();
var buffer = new Byte[2048];
int count = responseStream.Read(buffer, 0, buffer.Length);
while (count > 0)
{
ms.Write(buffer, 0, count);
count = responseStream.Read(buffer, 0, buffer.Length);
}
responseStream.Close();
ms.Close();
var responseBytes = ms.ToArray();
var encoding = new System.Text.ASCIIEncoding();
var coords = encoding.GetString(responseBytes);
var parts = coords.Split(',');
this.LatLang =new LatLng(parts[2],parts[3]);
return LatLang;
}
return null;
}
}
public class LatLng
{
public string Latitude { get; set; }
public string Longitude { get; set; }
public LatLng()
{
}
public LatLng(string lat, string lng)
{
this.Latitude = lat;
this.Longitude = lng;
}
}
#endregion
A função deste código é receber como parametros a cidade e o estado que serão mostrados no MAPA , buscar a LATITUDE e LONGITUDE desta cidade e renderizar o MAPA na página.
Vamos agora criar uma página ASPX que vai receber o nosso USERCONTROL.
Veja que nós apenas colocamos um controle do tipo USERCONTROL e apontamos na propriedade MODULE qual o USERCONTROL a ser carregado.
Nesta página na guia c# temos este pequeno código que define algumas propriedades do nosso usercontrol.
Este código será chamado no evento LOAD da nossa página
protected void Form1_()
{
UserControl1.City = Cidade + "," + Estado;
UserControl1.pushPin = true;
UserControl1.pushPinTitle="Sample Title";
UserControl1.pushPinDescription = "Sample Description";
UserControl1.zoom=17;
UserControl1.MapWidth="600px" ;
UserControl1.MapHeight="400px" ;
UserControl1.mapStyle = GoogleMapsControl.MapStyle.G_NORMAL_MAP;
}
Nosso próximo passo é colocar essa página chamada MAPAS no IFRAME da página de dados das cidades.
Para fazer isso use o seguinte código na guia C# da nossa página de cidades.
protected override void OnLoadComplete(EventArgs e)
{
System.Web.UI.HtmlControls.HtmlControl FrmMapas;
FrmMapas = (HtmlControl)this.FindControl("IFrame1");
FrmMapas.Attributes["src"] = "Mapas.aspx?Cidade='"+ TextBox2.Text+"'&Estado='"+ Label6.Text + "'";
FrmMapas.Attributes["onload"] = "hideProgress()";
base.OnLoadComplete(e);
}
Veja que este código tem a função de pegar o objeto do IFRAME e setar os valores de SRC e de LOAD.
Também é aqui que passamos para a página de MAPAS os parametros da cidade e o estado que serão renderizados.
Agora é só gerar nosso código e usar em nossa aplicação.
Você pode pegar o exemplo desta solução do GASweb aqui
Comente nossos posts sua colaboração é fundamental para a evolução do GASweb.
Pablo Hadler