[Tutorial] Google Maps, JQuery y ASP.NET ejemplo práctico de este Mix
Hola!, ha pasado un tiempo sin postear, lamentablemente he estado súper corto de tiempo, pero sin embargo quiero compartir algo con ustedes.
Hace un tiempo un buen amigo mío me comentó la inquietud de hacer algo con google maps, para distintos dispositivos, lo que me pareció bastante interesante. El tema es que me desperté con ese bicho de programar y leer documentación así que , antes que te aburras leyendo esto, te muestro el ejemplo final en un video para que te entusiasmes.
Como vez, vamos a mostrar las panaderías cercanas, pero con nuestra información, la que esta almacenada en una Base de Datos y mediante un WS vamos a obtener estos datos para mostrarlos en el mapa y además, vamos a agregar una leyenda para cada uno de estos puntos
Revisemos los pasos a seguir para obtener este resultado…
Paso 1: Obtener el Key desde google Map
Debes obtenerlo desde la siguiente URL: API key for Google Maps , debes contar con una cuenta en gmail, y registrar de que servidor vas a utilizar esta API (no necesario para probar en Localhost). Luego vas a obtener la key , que con la cual tienes que hacer referencia a la API.
En mi caso:
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true&key=ABQIAAAA3e9bpW5mHEGS7LVaB4R-3BQx6TWrfC8bNfnC-vtzzHJYkwhD6xTwJS9V3UI-UBnyi98SwuzCxumFSw" type="text/javascript"></script>
<script src="jquery-1.4.1.min.js" type="text/javascript"></script>
Paso 2: Crear el div para el mapa
<body>
<div id="map_canvas" style="width: 580px; height: 381px">
</div>
<ul id="list">
</ul>
</body>
Este va a ser el contenedor de nuestro mapa, además tenemos un tag ul para mostrar los puntos que vamos a marcar.
Paso 3: Crear el Código JavaScript
Luego viendo la documentación de la Api, vamos a configurar las siguientes características:
Icono de Marca Personalizado
$(document).ready(function () {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(-36.809731, -73.042903), 15);
map.setUIToDefault();
var baseIcon = new GIcon(G_DEFAULT_ICON);
baseIcon.shadow = "http://www.google.com/mapfiles/shadow50.png";
baseIcon.iconSize = new GSize(20, 34);
baseIcon.shadowSize = new GSize(37, 34);
baseIcon.iconAnchor = new GPoint(9, 34);
baseIcon.infoWindowAnchor = new GPoint(9, 2);
getMarkersWS(map);
}
Esta es la primera parte con esto instanciamos el mapa y lo asignamos al div que tenemos en el body. También damos las coordenadas para ubicar inicialmente el mapa (-36.809731, -73.042903), que es la ciudad donde vivo, y el zoom ,en este caso 15.
Para buscar tu ubicación, utiliza http://itouchmap.com/latlong.html
Luego vamos a modificar el icono partiendo de la base del icono por defecto, cambiamos la sombra y el tamaño, y como veremos, vamos a modificar con la función createMarker, que recibe el punto, y el html a imprimir, el icono sobre la marca.
function createMarker(point, htmlVentana) {
var Icon = new GIcon(baseIcon);
Icon.image = "empanadas.png";
markerOptions = { icon: Icon };
var marker = new GMarker(point, markerOptions);
GEvent.addListener(marker, "click", function () {
marker.openInfoWindowHtml(htmlVentana);
});
return marker;
}
Como comentaba antes, esta función se va a encargar de dibujar la marca, asignar además una ventana de información sobre la misma, asociada al evento click.
El ícono que elejí es la de una empanada, ya que es una comida típica Chilena y estamos celebrando el Bicentenario de mi Pais 
.
![image[3]](http://geeks.ms/cfs-file.ashx/__key/CommunityServer.Blogs.Components.WeblogFiles/gperez/image3_5F00_thumb_5F00_0244C7AE.png "image[3]")
La ventana a la que le pasamos la variable (htmlVentana), se va a mostrar sobre el marker:
Obviamente, los datos son obtenidos desde la base de datos.
Paso 4: Crear la Base de Datos.
Creamos una tabla Panaderías, con la siguiente estructura:
Con los Datos:
Para hacerla como dice Pablo Campos “Short & Good”, voy a crear un modelo LinqToSql para el manejo de datos:
Agregamos el WebService y codificamos la función GetPanaderias() que devuelve una lista de Objetos PanaderiaItem.
<WebMethod()> _
Public Function GetPanaderias() As List(Of PanaderiaItem)
Dim Items As New List(Of PanaderiaItem)
Dim modelo As New ModeloDataContext
Dim lista = From p In modelo.Panaderias
For Each p As Panaderia In lista
Items.Add(New PanaderiaItem With {.nombre = p.nombre, _
.direccion = p.direccion, _
.precio = p.precio, _
.descripcion = p.descripcion, _
.foto = p.foto, _
.lng = p.Lng.ToString, _
.lat = p.Lat.ToString})
Next
Return Items
End Function
Public Class PanaderiaItem
Public nombre As String
Public direccion As String
Public precio As Integer
Public descripcion As String
Public foto As String
Public lng As String
Public lat As String
End Class
Paso 5: Obtener los datos del WebService:
Vamos a crear un WebService que nos permita recuperar los datos mediante JSON:
function getMarkersWS(map) {
$.ajax({
type: "POST",
url: "MiWebService.asmx/GetPanaderias",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var panaderias = response.d;
$.each(panaderias, function (index, pan) {
var point = new GLatLng(pan.lng, pan.lat);
var htmlVentana = "<img src='fotos/" + pan.foto + "'><br> Panadería:" + pan.nombre + "</b><br><i>Precio:" + pan.precio + "</i><br>Direccion:" + pan.direccion;
var marker = createMarker(point, htmlVentana);
map.addOverlay(marker);
$("<li />").html(pan.nombre + " " + pan.direccion + " <b>" + pan.precio + "</b>").click(function () {
marker.openInfoWindowHtml(htmlVentana);
}).appendTo("#list");
});
},
failure: function (msg) {
alert(msg);
}
}); //fin llamada ajax
} //fin funcion getMarkersWS
Como puedes ver el código , obtenemos los datos desde el WebService, mediante JSON, cuando ocurre el ok (success), y vamos recorriendo la colección de Objetos que nos devuelve el WS con la función $.each de Jquery
$.each(panaderias, function (index, pan)
Luego armamos el punto (var point) y el mensaje HTML para pasarlo a la función createMarker. Luego vamos a dibujar el listado y vamos agregando el handlers click , para que al pinchar cada elemento, se muestre en el mapa el punto y la ventana. Gracias al encadenamiento de Jquery, podemos finalmente agregarlo al list (appendTo).
$("<li />").html(pan.nombre + " " + pan.direccion + " <b>" + pan.precio + "</b>").click(function () {
marker.openInfoWindowHtml(htmlVentana);
}).appendTo("#list");
Paso 6: El Proyecto Web.
Esta es la estructura de nuestro proyecto, como vez es bastante sencillo, y podemos lograr un sistema de seguimiento, por ejemplo refrescando de manera asíncrona los markers.
Recursos:
Documentación Api de Google:
http://code.google.com/intl/es-ES/apis/maps/index.html
Búscate en el Mapa
http://itouchmap.com/latlong.html
Descarga la aplicación
Como siempre digo, espero que te sirva, y si sigues este blog, sorry que no haya posteado, pero creo que con esto me revindico . Si no te funciona postea porfa, así nos ayudamos entre todos!
Saludos,
Gonzalo
PD: Esta manera es más práctico que marcar de esta manera:
