[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&amp;v=2&amp;sensor=true&amp;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 Sonrisa.

image[3]

La ventana a la que le pasamos la variable  (htmlVentana), se va a mostrar sobre el marker:image

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:image

Con los Datos:

image

Para hacerla como dice Pablo Campos “Short & Good”, voy a crear un modelo LinqToSql para el manejo de datos:

image

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.

 

image

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.

image

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 Sonrisa

image

Como siempre digo, espero que te sirva, y si sigues este blog, sorry que no haya posteado, pero creo que con esto me revindico Sonrisa. 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:

image

43 comentarios en “[Tutorial] Google Maps, JQuery y ASP.NET ejemplo práctico de este Mix”

  1. Hola… bastante práctico tu ejemplo… y se le puede dar una gran funcionalidad… pero disculpa mi ignorancia…
    ¿Qué versión de VS es necesaria para poder usar correctamente jquery?

    O jquery lo puedo usar con el IDE que estime más conveniente… te lo pregunto porque hace años que desarrollo en .NET, pero sólo hace uno que lo hago para el ambiente Web…

    Ojalá pudieras responderme… saludos… y muchas gracias nuevamente…

  2. Hola Juan
    Puedes utilizar Jquery con cualquier versión ya que “solo” (digo solo por que es un archivo, que si bien pequeño, es muy importante) es un archivo js,es decir, una librería JS.

    Si tienes Visual Studio 2008 o 2010, todo bien, sin embargo, el ejemplo a descargar está construido sobre el Fx 3.5
    Saludos,

  3. Gracias por tu respuesta… pero déjame preguntarte una última cosa que me dejó PLOP!…

    ¿Que es Fx 3.5?

    Saludos… y gracias por compartir tanta información…

  4. Hola Alberto,
    Este ejemplo se conecta a un WS , por lo que tienes que ejecutarlo sobre un Web Server o con Visual Studio, es así?
    Además el servicio se conecta a una BD para obtener los markers.
    Como estas abriendo el mapa.html?

  5. Bueno, estoy abriendo el sitio web desde el visual studio 2008 y haciendo el archivo mapa.html como pagina de inicio, al ejecutarlo solo puedo apreciar el mapa, mas no los marker ni la imagen de las empanadas.. Muchisimas gracias por tu atención..

  6. tengo duda igual que alberto, la version de sql servers esta correcta /sql servers 2008/, pero creo que es el conector donde tengo problemas., connectionString=”Data Source=.SQLEXPRESS;AttachDbFilename=|DataDirectory|Panaderias.mdf;Integrated Security=True;User Instance=True”

  7. Gonzalo mira que ejecuto la pagina con al ruta localhost y me muestra el mapa, pero si desde otro equipo la quieren ver llamandola digitando mi ip nos marca este error

    —————————
    Mensaje de página web
    —————————
    Este sitio web requiere una clave diferente del API de Google Maps. Puedes generar una clave nueva en http://code.google.com/apis/maps/.
    —————————
    Aceptar
    —————————

  8. Hola….

    Oye tengo una duda lo que pasa es Que yo ise un ejemplo paracido pero no se como agregar la foto a la etiqueta, estoy tilizando un (GInfoWindow) para mostrar los datos, bueno espero y me puedas ayudar. ok BYE estoy utilizando VB.NET 2005

  9. Hola Gonzalo….

    Lo que pasa es que no le entiendo bien al codigo que pusiste para agregar la imagen…. pero yo lo ago de esta manera…

    Public Sub DibujarIconos(ByVal LatLngIcono As GLatLng)
    Dim icon As New GIcon
    Dim Lng As Double
    Dim NomDire As String
    Dim Arreglo() As String
    Dim Nombre As String
    Dim Direccion As String

    icon.image = “Imagenes/pinmorado.png”
    icon.shadow = “Imagenes/pinmoradosombra.png”
    icon.iconSize = New GSize(32, 32)
    icon.shadowSize = New GSize(56, 32)
    icon.iconAnchor = New GPoint(16, 32)
    icon.infoWindowAnchor = New GPoint(16, 0)

    Dim mOpts As New GMarkerOptions
    mOpts.icon = icon
    mOpts.clickable = True

    Dim marker As GMarker
    marker = New GMarker(LatLngIcono, mOpts)

    NomDire = SacarSBD(i)
    Arreglo = Split(NomDire, “,”)
    Nombre = Arreglo(0)
    Direccion = Arreglo(1)

    Dim Window As GInfoWindow
    Window = New GInfoWindow(marker, Nombre & ” ” & Direccion, False, GListener.Event.click)
    GMap1.addInfoWindow(Window)
    End Sub

    (En donde nombre y direccion YA traen los valores de la BD).

    Bueno adios y espero y me puedas ayudar y muchas gracias….
    BYE Saludos

  10. 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;
    }

    Esta función , como la estoy utilizando, la puedes reemplazar por la que ocupas, habría que ver la versión que la API que ocupas, yo me guié por la ultima versión y en las funciones propuestas por google.

  11. Hola Gonzalo ,
    Buenas mira espero me puedas ayudar por favor estoy intentando conectarme a la Bd con el ejemplo y solo me carga la pagina mas no los datos de la Bd quisera por favor que me ayude, derrepente tengo algo que modificar del ejemplo o de la bd por favor ,
    quisera saber si se hace alguna modificacion despues de haber bajado su ejemplo por favor
    disculpe mi ignorancia

    Gracias de Antemano

  12. Hola,
    Quiero hacer lo mismo que tu pero en ves de utilizar la longitud y latitud, quiero utilizar la direccion del lugar, por ejemplo, “Camilo Enriquez 700”.

    Saludos y gracias por tu trabajo.

  13. Mensaje de error del compilador: BC30516: Error de resolución de sobrecarga porque ninguna de las funciones ‘New’ a las que se tiene acceso acepta este número de argumentos.

    Error de código fuente:

    Línea 13: Public Function GetDirecciones() As List(Of Direcciones)
    Línea 14: Dim Items As New List(Of Direcciones)
    Línea 15: Dim modelo As New ModeloDataContext

    Buenas no se si alguin puede ayudarme pero el error debe ser muy elemental, alguien sabria decirme por que es este error?

  14. Hola Luis,
    Puedes agregarlas con un formview o de la manera común y corriente de agregar un registro, tambien lo puedes hacer por ajax con jquery y un servicio web, o con las posibilidades que brinda el ScriptManager para acceder asyncronamente a un WebService

  15. Buenas Gonazalo, GENIAL!!! todo pero mi problema es que no se abres los popus de los puntos que tengo almacenados en la BBDD y estoy ya loco de revidas el código, he segido tus pasos uno por uno y no salen! de que pude ser?

    Un saludo

  16. Saludos Gonzalo.

    Gracias de antemano por tu Post, es magnifico, espero me puedas ayudar, tengo una pagina con ASP en la cual tengo otros controles (dentro de una tabla), al agregar el MAP (el div lo tengo en una celda de la tabla) este se pone al inicio y tapa los controles iniciales, sabes como podria hacer para que el mapa apresca solo en la celda donde esa declarado el DIV.

    De antemano gracias por tu respuesta.

    Quedo a tus órdenes.

  17. Magnifico aporte, sigue asi, muchos necesitamos una guia practica, y con esto te colocas en el top 10 de mis preferidos.

    He reconstruido de cierta manera el proyecto que has proporcionado, pero no logro ver la imagenes en el mapa, y mucho menos las ubicaciones de acuerdo a la informacion en la DB, he comprobado que la conexion con la DB existe, me parece que tengo algo pendiente, supongo que te has topado con este problema.

    Agradezco de antemano tu fina atencion, quedo en espera de tus comentarios. Saludos.

  18. Hola!gracias por los comentarios, revisaste la clave que entrega google maps?? Verifica eso, si no te resulta enviame el ejemplo de lo que estas haciendo a chalalo – hotmail.com
    Saludos!

  19. hola man buenas noches una consulta, dime esta aplicaciom puede correr en un celular o smartphone, yo estoy buscando una aplicacion parecida a esta, la mia es la siguiente….mostrar los centros comerciales mas cercanas a mi posicion…..dime

    Google Maps, JQuery mobile y ASP.NET

    respondeme a joseph_loveyou@hotmail.com

  20. Hola Gonzalo, primero felicitarte por tu pagina nos ayudas mucho en tu sitio, ahora voy al grano.

    Realize el tutorial pero con Api de Google maps version 3 y me salio excelente, pero se ocurrio separar el Servicio Web en un Sitio Web y la Aplicacion que consume en otro sitio web, pero no he logrado poder correr ambos este es el error que me arroja en firebug.

    NetworkError: 404 Not Found – http://localhost:15918/ServicioMapaNodos/MapaNodos.asmx/GetDispositivos

    como podria configurarlo en asp.net para que pueda correr.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *