En
este post vamos a ver cómo podemos integrar Google Maps en nuestra aplicación
ASP.NET MVC.
Veremos
principalmente 3 cosas:
- Obtener una posición mediante las coordenadas de longitud y latitud
- Obtener una posición mediante una dirección
- Calcular una ruta desde una dirección a un punto
Para
ello nos basaremos en las APIS que nos ofrece Google, concretamente en la APIde Google Maps y en la documentación específica de JavaScript.
Primero de todo hemos de referenciar la Api de Google desde nuestro proyecto:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
Obtener una posición mediante las coordenadas de longitud y latitud
· Hemos creado un modelo de datos que hemos
llamado PosicionGoogle
, que tendrá las propiedades de longitud, latitud, nombre y detalle del lugar
que queremos marcar dentro del mapa.
·
Tenemos un controlador dónde tenemos dos
acciones con el mismo nombre (Index), a una acción le hemos puesto el atributo del
“verbo” HttpPost que será la acción que generará la vista correspondiente una
vez hagamos el submit del formulario, pasándole el objeto PosicionGoogle con
los valores rellenados.
· Finalmente tenemos la vista, que lo primero que
tenemos que hacer es referenciar el modelo de datos que recibirá
@model GoogleMaps.Models.PosicionGoogle
@using
System.Threading;
@using System .Globalization;
En la vista también hemos de crear un <div> dónde se insertará el mapa.
A continuación crearemos el objeto googleMap (google.maps.Map), pasándole
como parámetro el div de mapa, y las opciones que tendrá el mapa (zoom,
mapa/satélite, habilitar Street view…)
Finalmente creamos un punto (coordenada) mediante el
método google.maps.LatLng, y le
pasamos por parámetro la latitud y longitud del Modelo. Este punto lo añadimos
al bounds, y creamos un marker (google.maps.Marker) que nos mostrará la
posición dentro del mapa, pasándole los parámetros necesarios (punto, mapa, animación
de entrada, icono …). Y para acabar añadimos la posición dentro del mapa.
NOTA: Para poder insertar datos javascript dentro de
una parte de código servidor Razor, utilizamos la etiqueta <text>. De esta manera podemos mezclar un texto que
es “JavaScript” con código Razor. Que se ejecutará en el servidor y enviará al
cliente el texto JavaScript conjuntamente con el resultado de la compilación
<script language="javascript"
type="text/javascript">
$(document).ready(function () {
var
bounds = new google.maps.LatLngBounds();
var
options = {
zoom : 14,
streetViewControl:true,
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
var
googleMap = new google.maps.Map($("#map")[0],options);
var
infoWindow = new google.maps.InfoWindow({
content: "Cargando..." });
@if
((Model.Latitud>0) || (Model.Direccion!=""))
{
if
(Model.Latitud>0)
{
<text>
var
point = new google.maps.LatLng(@Model.Latitud, @Model.Longitud);
bounds.extend(point);
var
marker = new google.maps.Marker({
position: point,
map: googleMap,
animation:
google.maps.Animation.DROP,
icon:'/Content/images/icono_restaurante.png',
title:'@Model.Nombre',
html: '@Model.MasInfo.Replace("\r\n","<br
/>")'
});
google.maps.event.addListener(marker,
"click", function
() {
texto=new String(this.html).replace(/</gi,"<").replace(/>/gi,">");
infoWindow.setContent(texto);
infoWindow.open(googleMap,this);
});
</text>
}
googleMap.fitBounds(bounds);
});
</script>
<div id="map" style="width: 800px; height: 500px;overflow:
hidden"></div>
|
Obtener una posición mediante una dirección
Para obtener una posición dentro de Google Maps a
partir de una dirección, la base es muy similar al ejemplo anterior, pero en el
script tenemos que las coordenadas mediante una decodificación mediante el geocoder (google.maps.Geocoder)
Al geocoder.geocode le pasamos la dirección
(dirección, CP, Ciudad, Provincia, País), y google es capaz de decodificar esta
dirección en una posición, obtendremos el punto mediante
results[0].geometry.location
<script language="javascript"
type="text/javascript">
$(document).ready(function () {
var geocoder = new
google.maps.Geocoder();
var
options = {
zoom : 14,
streetViewControl:true,
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
var
googleMap = new google.maps.Map($("#map")[0],options);
var
infoWindow = new google.maps.InfoWindow({
content: "Cargando..." });
@if
((Model.Latitud>0) || (Model.Direccion!=""))
{
<text>
var
address = '@Model.Direccion'
+ ',' + '@Model.Ciudad' + ',' + '@Model.Provincia' + ',' + '@Model.CP'
geocoder.geocode( { 'address': address}, function(results,
status) {
if
(status == google.maps.GeocoderStatus.OK) {
googleMap.setCenter(results[0].geometry.location);
var
marker = new google.maps.Marker({
map: googleMap,
position: results[0].geometry.location,
animation:
google.maps.Animation.DROP,
icon:'/Content/images/icono_restaurante.png',
title:'@Model.Nombre',
html: '@Model.MasInfo.Replace("\r\n","<br
/>")'
});
} else
{
alert('Dirección NO Encontrada. Motivo: ' + status);
}
});
google.maps.event.addListener(marker,
"click", function
() {
texto=new String(this.html).replace(/</gi,"<").replace(/>/gi,">");
infoWindow.setContent(texto);
infoWindow.open(googleMap,this);
});
</text>
googleMap.fitBounds(bounds);
});
</script>
|
Calcular una ruta desde una dirección a un punto
Para
calcular la ruta desde una dirección hasta un punto, lo primero que tenemos que
hacer es crear un nuevo <div> dónde insertaremos el plan de ruta
<div id="directions-panel"></div>
Y otro panel dónde escribiremos la dirección origen y
el botón que ejecutará la función JavaScript para crear la ruta
<div id="panel">
<b>Ciudad Origen: </b>
<input type="text" id="start" />
<input type="button" onclick="calcRoute(@Model.Latitud, @Model.Longitud);"
value="Calcular
Ruta" />
</div>
<script language="javascript"
type="text/javascript">
var
directionsService = new
google.maps.DirectionsService();
var
directionsDisplay;
$(document).ready(function () {
directionsDisplay = new google.maps.DirectionsRenderer();
var
bounds = new google.maps.LatLngBounds();
var
options = {
zoom : 14,
streetViewControl:true,
mapTypeId:
google.maps.MapTypeId.TERRAIN
};
var
googleMap = new google.maps.Map($("#map")[0],options);
var
infoWindow = new google.maps.InfoWindow({
content: "Cargando..." });
@if
((Model.Latitud>0) || (Model.Direccion!=""))
{
<text>
var
point = new google.maps.LatLng(@Model.Latitud, @Model.Longitud);
bounds.extend(point);
var
marker = new google.maps.Marker({
position: point,
map: googleMap,
animation:
google.maps.Animation.DROP,
icon:'/Content/images/icono_restaurante.png',
title:'@Model.Nombre',
html: '@Model.MasInfo.Replace("\r\n","<br
/>")'
});
</text>
}
googleMap.fitBounds(bounds);
directionsDisplay.setMap(googleMap);
directionsDisplay.setPanel(document.getElementById('directions-panel'))
});
function
calcRoute(latitud, longitud) {
var
destino = new google.maps.LatLng(latitud,
longitud);
var
start = document.getElementById('start').value;
var
request = {
origin:start,
destination:destino,
travelMode:
google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if
(status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
</script>
|
Puedes descargarte el código de ejemplo desde aquí.
No hay comentarios:
Publicar un comentario