Tips de Desarrollo Web

Escrito por Juan David Nicholls

NAVEGACIÓN

Google Maps y WebForms ASP.NET con Gmap3

11. julio 2013 23:41 / Nicholls / ASP.NET . HTML5 . jQuery / Comentarios (0)

En el caso de que tengas en tu Base de Datos un Tabla de tiendas por ejemplo, las cuales tienen una ubicación, una latitud y una longitud por cada una y necesitas mostrarlas en un mapa, podemos integrar muy fácilmente Google Maps con ASP.NET mediante un Server Tag y un jQuery plugin Gmap3.

Descargamos el jQuery Plugin de la página

gmap3 jQuery Plugin

En nuestra página Default.aspx tendríamos por ejemplo la siguiente configuración(ver la documentación del Plugin para una configuración mas especifica)

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html>
  4.  
  5. <html>
  6. <head id="Head1" runat="server">
  7.     <title></title>
  8. </head>
  9. <body>
  10.     <form id="form1" runat="server">
  11.         <div id="gmap" style="height: 600px; width: 500px;"></div>
  12.     </form>
  13.     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  14.     <script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
  15.     <script src="gmap3.min.js" type="text/javascript"></script>
  16.     <script>
  17.         $('#gmap').gmap3({ // Inicializamos nuestra configuracin del jQuery Plugin
  18.             map: {
  19.                 options: {
  20.                     center: [4.061536, -72.886734] // Centro del Mapa (Latitud,Longitud)
  21.                 }
  22.             },
  23.             marker: {
  24.                 values: [
  25.                   <%= markers %> // Ubicaciones de nuestras tiendas
  26.                 ]
  27.             }
  28.         });
  29.     </script>
  30. </body>
  31. </html>

Podemos observar que estamos utilizando un Server Tag el cual se ejecutará después de cargar el Page_Load, con la ubicación de nuestras tiendas.

En el Page_Load nos conectamos con nuestra Base de Datos y formamos la estructura que requiere el jQuery Plugin

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using Core;
  8.  
  9. public partial class _Default : System.Web.UI.Page
  10. {
  11.     protected string markers { get; set; }
  12.     protected void Page_Load(object sender, EventArgs e)
  13.     {
  14.         Manager manager = new Manager(); // Conexion con nuestra Capa de Negocio
  15.         IQueryable<Store> stores = manager.GetStores(); // Retorna una consulta con LINQ por ejemplo
  16.         foreach (var store in stores)
  17.         {
  18.             markers += string.Format("{{ latLng: [{0},{1}] }},", store.StoreLat, store.StoreLng);
  19.         }
  20.         if (stores != null)//Eliminar la ltima coma
  21.         {
  22.             markers = markers.Remove(markers.Length - 1);
  23.         }
  24.     }
  25. }

Al ejecutar nuestra página en el Browser, podemos observar eficazmente que se han cargado los datos

Google Maps y ASP.NET

Etiquetas : , ,
blog comments powered by Disqus