Gracias a todas las
APIs que nos facilita Google, podemos hacer uso prácticamente de todos los servicios que ofrece la compañía a día de hoy. En este post en concreto me gustaría hablaros de cómo utilizar el API de Google Maps en su versión 3.0 para generar mapas dinámicos con una enorme cantidad de funciones. Además, para rizar más el rizo utilizaré
ASP.NET MVC 3 con Razor para crear una llamada síncrona y otra asíncrona con la ayuda de
JQuery.
Referencias
Para utilizar el API de Google Maps son necesarias las siguientes referencias:
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Nota: Cuando utilizas Google Maps siempre debe especificarse si vas a utilizar un sensor, por ejemplo un GPS, para determinar la ubicación del usuario (importante para los dispositivos móviles). En este caso estableceremos el valor del parámetro sensor a false ya que no entra este escenario dentro del post 
¿Por dónde empiezo?
Lo primero que debemos tener en cuenta es que podemos
ubicar marcas de dos formas distintas:
Indicando las coordenadas del sitio o recuperando las coordenadas a través de una dirección postal. Sin embargo, en el segundo caso tenemos una limitación por parte de la API, la cual sólo nos permite solicitar unas 10 direcciones por consulta, lo cual limita nuestro campo de acción. En este post utilizaremos coordenadas para poder agregar tantas marcas como sea necesario
Para ello, he creado un objeto de prueba que almacenará todas las marcas y un repositorio, también de prueba, que nos devolverá tres objetos dentro de una lista para la demo.
Objeto de prueba
namespace GoogleMapsASPNETMVC3.Models
{
public class GoogleMarker
{
public string SiteName { get; set; }
public double Latitude { get; set; }
public double Longitude { get; set; }
public string InfoWindow { get; set; }
}
}
Repositorio de prueba
using System.Collections.Generic;
namespace GoogleMapsASPNETMVC3.Models
{
public class MarkerRepository
{
public IList<GoogleMarker> GetMarkers()
{
var googleMarkers = new List<GoogleMarker>
{
new GoogleMarker
{
SiteName = "Jardines de Sabatini",
Latitude = 40.421749,
Longitude = -3.713994,
InfoWindow = "InfoWindow de los Jardines de Sabatini"
},
new GoogleMarker
{
SiteName = "Campo del Moro",
Latitude = 40.419658,
Longitude = -3.718801,
InfoWindow = "InfoWindow del Campo del Moro"
},
new GoogleMarker
{
SiteName = "Parque de la Cornisa",
Latitude = 40.413254,
Longitude = -3.716483,
InfoWindow = "InfoWindow del Parque de la Cornisa"
}
};
return googleMarkers;
}
}
}
Llamada síncrona
Para la llamada síncrona lo que vamos a hacer es solicitar la lista de marcas y pasarla a la vista para poder asociarla a la propiedad Model.
[HttpGet]
public ActionResult Sync()
{
return View(_markerRepository.GetMarkers());
}
Una vez en la vista agregaremos el siguiente código:
@model IEnumerable<GoogleMapsASPNETMVC3.Models.GoogleMarker>
@using System.Threading;
@using System.Globalization;
@{
ViewBag.Title = "Sync";
Thread.CurrentThread.CurrentCulture = new CultureInfo("en-US");
}
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var bounds = new google.maps.LatLngBounds();
var options = {
zoom : 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var googleMap = new google.maps.Map($("#map")[0],options);
var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });
@foreach (var marker in Model)
{
<text>
var point = new google.maps.LatLng(@marker.Latitude, @marker.Longitude);
bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: googleMap,
icon:'/Content/images/cloud_marker.png',
html: '@marker.InfoWindow'
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(this.html);
infoWindow.open(googleMap, this);
});
</text>
}
googleMap.fitBounds(bounds);
});
</script>
<h2>
Sync</h2>
<div id="map" style="width: 800px; height: 500px;"></div>
Lo primero que hacemos en la parte javascript es la inicialización de unas variables bases como son bounds donde vamos a insertar cada uno de los puntos de coordenadas, googleMap que asignará el espacio dedicado al mapa a un div con id “map” situado abajo del todo e infoWindow que nos servirá para asociar un pop up a cada marca del mapa.
Posteriormente utilizamos la @ para inicializar un foreach, ya que estamos utilizando el motor de vistas Razor, y recorremos cada una de las marcas ubicadas en el Model del tipo GoogleMarker. Como vamos a mezclar código javascript con variables de servidor, debemos hacer el uso de <text></text> para que no interprete todo el código dentro del foreach como código de servidor.
Los pasos que vamos a realizar en cada iteración es la creación de cada conjunto de coordenadas en el mapa a través de
google.maps.LatLng para acto seguido usar el resultado como la posición de la marca en el objeto
google.maps.Marker en el mapa asociado. En este último podemos asociar distintos tipos de opciones como por ejemplo el icono que queremos mostrar para dicha marca, sombreados, etcétera. En este caso he modificado la imagen por una nube
Además podemos asociar un evento a cada marca para mostrar el típico pop up que aparece cuando haces clic sobre una de ellas. Para ello utilizaremos google.maps.event.Listener donde crearemos la asociación con la clase InfoWindow instanciada al inicio del script.
Por otro lado, si os fijáis de nuevo en el código anterior, he cambiado la cultura a en-US. Esto es debido a que es necesario respetar el signo de separación de los decimales en las coordenadas ya que, de lo contrario, la latitud y longitud recuperadas de la propiedad Model se pintarían con comas y no se mostraría correctamente.
Como resultado obtendríamos la siguiente imagen
Llamada asíncrona
Para la llamada asíncrona el escenario cambia:
@{
ViewBag.Title = "Async";
}
<script language="javascript" type="text/javascript">
$(document).ready(function () {
var bounds = new google.maps.LatLngBounds();
var options = {
zoom: 14,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var googleMap = new google.maps.Map($("#map")[0], options);
var infoWindow = new google.maps.InfoWindow({ content: "Cargando..." });
$.ajax({
type: "POST",
url: "GetMarkersAsync",
datatype: "json",
success: function (data) {
for (var i = 0; i < data.length; i++) {
var point = new google.maps.LatLng(data[i].Latitude, data[i].Longitude);
bounds.extend(point);
var marker = new google.maps.Marker({
position: point,
map: googleMap,
html: data[i].InfoWindow
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.setContent(this.html);
infoWindow.open(googleMap, this);
});
}
}
});
googleMap.fitBounds(bounds);
});
</script>
<h2>
Async</h2>
<div id="map" style="width: 800px; height: 500px;">
</div>
En este segundo caso estamos utilizando JQuery para la llamada Ajax a una acción llamada
GetMarkersAsync, la cual nos devolverá un listado de objetos en
JSON con el mismo formato que nuestro objeto de prueba. Para ello, crearemos una acción HttpPost que retorne dicho listado basado en la clase GoogleMarker.
[HttpPost]
public ActionResult GetMarkersAsync()
{
return Json(_markerRepository.GetMarkers());
}
En este caso el resultado es el mismo que en la llamada síncrona a excepción de los iconos utilizados en las marcas, ya que en el segundo ejemplo he omitido la propiedad icon para que utilice el icono por defecto de Google.
Adjunto el proyecto por si fuera de utilidad
¡Saludos!
