Vamos a implementar una miniaplicación que mostrará diferentes puntos de interés turístico en nuestra aplicación usando las API de Google Maps. Además vamos a darle diferentes colores a los marcadores según el tipo de punto de interés de que se trate. Para ello vamos a seguir los siguientes pasos.
Creamos un nuevo proyecto "Aplicación web ASP.NET" en Visual Studio 2013 y seleccionamos la plantilla MVC4. Ahora añadimos el siguiente script a la vista Views/Home/index.cshtml. De esta forma nos aseguramos que solo se cargarán estas librerías si ejecutamos esta vista en concreto.
01 <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
Ahora vamos a darle estilo al contenedor del mapa para asegurarnos que se vea correctamente y también vamos a darle estilo a la ventana emergente que aparecerá al hacer clic sobre los puntos de interés que coloquemos en el mapa. Esta porción de código CSS, podemos incluirla en nuestra hoja de estilo, pero en este ejemplo por comodidad lo incluiremos directamente en la vista. (Views/Home/index.cshtml)
01 <style>
02 #map_canvas img {
03 max-width: none;
04 }
05
06 .infoDiv {
07 height: 300px;
08 width: 300px;
09 -webkit-user-select: none;
10 background-color: white;
11 border-style: solid;
12 border-color: red;
13 color: red;
14 }
15 </style>
A continuación creamos el contenedor del mapa, para ello nos vamos nuevamente a Views/Home/index.cshtml y añadimos el siguiente código HTML.
01 <div id="map_canvas" style="height: 600px;"></div>
Por último tenemos que generar los puntos de interés, para ello usaremos jQuery para llamar a la función "mostrarMapa()" una vez se haya cargado la pagina. Este código lo escribiremos en cualquier parte de la página entre las conocidas etiquetas <script type="text/javascript"></script>, aunque suele ser común ponerlo al final.
01 $(document).ready(function () {
02 mostrarMapa();
03 });
El código de la función "mostrarMapa()" puede ser algo parecido a lo siguiente:
01 function mostrarMapa() {
02
03
04 //definimos el punto central en el mapa
05 google.maps.visualRefresh = true;
06 var puntoInicial = new google.maps.LatLng(37.388308, -5.995510);
07
08 var mapOptions = {
09 zoom: 14,
10 center: puntoInicial,
11 mapTypeId: google.maps.MapTypeId.G_NORMAL_MAP
12 };
13 //creamos el mapa
14 var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
15
16 //esto son los datos de los puntos de interes en JSON, que bien podría venir de un servicio Rest, una base de datos, o cualquier otro origen de datos.
17 var data = [
18 { "Id": 1, "tipo": "Monumento", "PuntoDeInteres": "Torre del Oro", "Descripcion": "La Torre del Oro de Sevilla es una torre albarrana situada en el margen izquierdo del río Guadalquivir, junto a la plaza de toros de la Real Maestranza.", "Long": "37.382446", "Lat": "-5.996472" },
19 { "Id": 2, "tipo": "Restaurante", "PuntoDeInteres": "La mia tana", "Descripcion": "Pizza, pasta y risotto en un restaurante italiano decorado con originales cuadros que se salen del lienzo", "Long": "37.390723", "Lat": "-5.991137" },
20 { "Id": 3, "tipo": "Interes turistico", "PuntoDeInteres": "Plaza de España", "Descripcion": "La plaza de España de Sevilla es un gran espacio abierto monumental rodeado por un edificio semicircular de estilo regionalista.", "Long": "37.377059", "Lat": "-5.987319" },
21 { "Id": 4, "tipo": "Monumento", "PuntoDeInteres": "Catedral de Sevilla", "Descripcion": "es la catedral gótica cristiana con mayor superficie del mundo. La Unesco la declaró en 1987, junto al Real Alcázar y el Archivo de Indias, Patrimonio de la Humanidad 2 y, el 25 de julio de 2010, Bien de Valor Universal Excepcional.", "Long": "37.385839", "Lat": "-5.993128" }
22 ];
23
24 //Ahora recorremos los datos y uno a uno vamos estableciendo los puntos sobre el mapa.
25 $.each(data, function (i, item) {
26
27 var punto = new google.maps.LatLng(item.Long, item.Lat);
28
29 var marker = new google.maps.Marker({
30 'position': punto,
31 'map': map,
32 'title': item.PuntoDeInteres
33 });
34
35 //ponemos los marcadores de diferentes colores según el tipo de punto turistico de que se trate.
36 if (item.tipo == "Monumento")
37 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/blue-dot.png');
38 else if (item.tipo == "Restaurante")
39 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/green-dot.png');
40 else if (item.tipo == "Interes turistico")
41 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/red-dot.png');
42 else
43 marker.setIcon('http://maps.google.com/mapfiles/ms/icons/yellow-dot.png')
44
45
46 //añadimos informacion adicional sobre el punto en question, que se nos mostrará al hacer click sobre este.
47 var infowindow = new google.maps.InfoWindow({
48 content: "<div class='infoDiv'><h2>" + item.PuntoDeInteres + "</h2>" + "<h3>" + item.tipo + "</h3>" + "<div><h4> " + item.Descripcion + "</h4></div></div>"
49 });
50
51 google.maps.event.addListener(marker, 'click', function () {
52 infowindow.open(map, marker);
53 });
54
55 })
56 }
Puede descargar el ejemplo aquí.
