- Presentación.
NOTA: he mantenido un gran ancho de página porque algunas líneas de código no se deben cortar.
He preferido realizarlo de esta manera para que se vean completa sin tener que introducirla en otro marco.
- Vamos a utilizar un API de Google para visualizar mapas estáticos.
Mapas estáticos son dibujos limitados de mapa, es decir que no podemos arrastrar todo el mapa como lo hacemos con el Earth o el Maps de Google, solo se presentará un trozo de 640 x 640 del mapa.
Se puede mover un poco el mapa por la pantalla porque el dibujo de 640x640 suele ser mayor que el que tiene la pantalla de los teléfonos móviles.
- Aquí Podemos obtener información sobre el API de mapas estáticos de Google.
- Tiene un límite de 25 000 mapas al día, aunque creo que son bastantes menos.
- Al final de la página lo haremos con mapas dinámicos mediante la web de maps de Google. Con el mapa dinámico podemos arrastrar el plano sin limitaciones de tamaño. |
|
- Ejemplo, pulsa:
http://maps.googleapis.com/maps/api/staticmap?center=36.679950714,-6.11663&zoom=10&size=640x640&maptype=roadmap&sensor=false
Ponemos la latitud, la longitud, el zoom, el tamaño máximo (640x640), el tipo de mapa (road, satellite,..) y sensor=false.
¿Dónde puedo encontrar la latitud y longitud de un lugar?... en cualquier buscador puedes encontrar web como esta...
http://www.coordenadas-gps.com/
De qué trata nuestro proyecto.
De pulsar un botón y que se genere un mapa de una zona aleatoria de la península Ibérica.
Pulsando otros botones podemos crear otros mapas de zonas próximas y hacerles zoom.
________________________________________________
1.- Mapas estáticos de Google.
Comenzamos
Vamos a crear dos números aleatorios,
uno comprendido entre 36.5449211 y 43.3411611
otro comprendido entre 0 y 8.7890611
Porqué esos números, por que son los límites de latitud y longitud aproximada de la península Ibérica.
Los números aleatorios se crean con números enteros, en cambio nosotros necesitamos números con decimales.
Lo solucionamos de esta manera: creamos número aleatorio entre 365449211 y 433411611 y el resultado lo dividimos entre 10000000,
de esta manera obtendremos un número comprendido entre 36.5449211 y 43.3411611
Igualmente, haremos lo mismo con 0 y 87890611, dividimos el resultado entre 10000000.
La máxima longitud de la península Ibérica es aproximadamente - 8.7890611, es negativa, por eso cuando vamos a calcular su valor se multiplica por -1.
De esta manera creamos la latitud:
latmin = 365449211
latmax = 433411611
latitud = Rnd(latmin, latmax)
latitud = latitud / 10000000
Rnd, crea un número aleatorio comprendido entre el mínimo y máximo suministrado.
¿Cómo ponemos la longitud y latitud obtenida en la dirección URL para que se muestre el mapa en la web?
"http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
Debemos concatenar parte genérica de la dirección con parte variable. La concatenación se hace mediante &.
Las partes variables son: latitud, longitud y zoom.
Fíjate que la dirección URL también lleva concatenaciones de por sí, por eso nos encontramos a veces dos & casi juntos: "&escala&"&size
- Cuando pulsamos el Button1, se crea una latitud y una longitud aleatoria y se agrega a la direccion URL.
- Cuando pulsamos el Button2, se suma 0.1 a la latitud para que salga otro mapa con coordenadas 0.1 más a la izquierda.
- Cuando pulsamos el Button3, se resta 0.1 a la latitud para que salga otro mapa con coordenadas 0.1 más a la derecha.
- Cuando pulsamos el Buttton4, se suma 0.1 a la longitud para que salga otro mapa con coordenadas 0.1 más arriba.
- Cuando pulsamos el Button5, se resta 0.1 a la longitud para que salga otro mapa con coordenadas 0.1 más abajo.
- Cuando pulsamos el Button6, se suma 1 al zoom para que salga un mapa más cercano.
- Cuando pulsamos el Button7, se resta 1 al zoom para que salga un mapa más lejano.
- En el Log, pestaña abajo-derecha del código se presenta la dirección obtenida.
- Designer
- Es necesario crear con el Designer un Layout, con 7 Botones y 1 WebView.
Una vez más quiero recalcar que estos programas son de aprendizaje e iniciación,
no se pretende realizar un código profesional ni complicado,
el único objetivo es presentar algunas de las posibilidades que tenemos con este programa.
Mapas estáticos de Google. |
' Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Process_Globals
End Sub
Sub Globals
Dim WebView1 As WebView
Dim longitud, latitud As Float
Dim escala As Int
escala = 10
Dim url As String
End Sub
Sub Activity_Create(FirstTime As Boolean)
Activity.LoadLayout("Layout") 'Cargamos el Designer
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub
Sub Button1_Click
latmin = 365449211
latmax = 433411611
latitud = Rnd(latmin, latmax)
latitud = latitud / 10000000
Log(latitud)
lonmin = 0
lonmax = 87890611
longitud = Rnd(lonmin, lonmax)
longitud = -1 * longitud / 10000000
Log(longitud)
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
Log(url)
End Sub
Sub Button2_Click
latitud = latitud + 0.1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
Sub Button3_Click
latitud = latitud - 0.1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
Sub Button4_Click
longitud = longitud + 0.1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
Sub Button5_Click
longitud = longitud + 0.1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
Sub Button6_Click
escala = escala + 1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
Sub Button7_Click
escala = escala - 1
url = "http://maps.googleapis.com/maps/api/staticmap?center="&latitud&","&longitud&"&zoom="&escala&"&size=640x640&maptype=roadmap&sensor=false"
WebView1.LoadUrl(url)
End Sub
|
________________________________________________
2.- Mapas dinámicos de Google.
También podemos hacerlos con mapas dinámicos, para ello sustituimos las direcciones url por esta otra:
url = "https://maps.google.es/?ll="&latitud&","&longitud&"&spn=1.088653,1.296387&t=h&z="&escala
t=h .... para mapas de satélite
t=m ... para mapas de carretera
Se puede poner mapa de satélite, de carretera,...
Con el mapa dinámico no hace falta buscar nueva ubicación con los demás botones ni hacer zoom,
ya que lo podemos hacer directamente con el interface que aparece sobre el mapa. Es decir, solo haría falta el Button1.
Sub Button1_Click
latmin = 365449211
latmax = 433411611
latitud = Rnd(latmin, latmax)
latitud = latitud / 10000000
Log(latitud)
lonmin = 0
lonmax = 87890611
longitud = Rnd(lonmin, lonmax)
longitud = -1 * longitud / 10000000
Log(longitud)
url = "https://maps.google.es/?ll="&latitud&","&longitud&"&spn=1.088653,1.296387&t=h&z="&escala
WebView1.LoadUrl(url)
Log(url)
End Sub
________________________________________________
¿Cómo puedo ver mi longitud y latitud mediante los mapas de Google?
Vamos a un navegador web, Internet Explorer, Chrome, Firefox,... y entramos en maps de Google.
Nos situamos en el lugar donde queremos obtener la posición, la centramos y hacemos un zoom.
Pulsamos en icono de Enlazar.
(Actualmente solo con hacer zoom y pulsar en un punto salen sus coordenadas)
________________________________________________
3.- Ver un mapa de Google que tengo configurado en un archivo web.
- Esta aplicación está basada en la API de Google, que podemos ver en API de JavaScripts de Google Maps.
Crea un nuevo proyecto con este contenido:
Copia y pega este código en un nuevo proyecto |
' Juan Antonio Villalpando
' juana1991@yahoo.com
Sub Process_Globals
End Sub
Sub Globals
Dim WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
WebView1.Initialize("WebView1")
Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
WebView1.LoadUrl("file:///android_asset/web.htm")
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub |
Ahora crea un archivo llamado web.htm con el contenido de la tabla inferior y cópialo en la carpeta Files del proyecto que estás realizando.
Ejecuta el proyecto.
Copia este código como web.htm y guárdalo en la carpeta Files |
<html>
<head>
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true&libraries=drawing'></script>
<script type='text/javascript'>
var drawingManager; var myLatlng = new google.maps.LatLng(36.6, -6.1);
var map;
function initialize() {map = new google.maps.Map(document.getElementById('map_canvas'), {zoom: 12,center: myLatlng, mapTypeId: google.maps.MapTypeId.TERRAIN, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, disableDefaultUI: true,zoomControl: true,streetViewControl: true, scrollwheel: true, disableDoubleClickZoom: false, draggable: true, keyboardShortcuts: true, mapTypeControl: true,navigationControl: true, scaleControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT },navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT }})
var polyOptions = {strokeWeight: 0,fillOpacity: 0.45,editable: true}; drawingManager = new google.maps.drawing.DrawingManager({drawingMode: google.maps.drawing.OverlayType.POLYGON,drawingControlOptions: { drawingModes: [google.maps.drawing.OverlayType.POLYGON] },polygonOptions: polyOptions, map: map});
google.maps.event.addListener(map, 'click', function (myMouseEvent) { var clickedLocation = myMouseEvent.latLng.toUrlValue(); });
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(36.6, -6.1), map: map, title: 'A', clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/arrow.png' });}
google.maps.event.addDomListenerOnce(window, 'load', initialize);
</script>
</head>
<body onload=initialize()>
<div id='map_canvas' style='width:100%; height:100%'>
</div>
</body>
</html>
|
- A la carpeta Files y al archivo que tiene en su interior, lo llamamos mediante el código de esta manera: "file:///android_asset/web.htm"
- Recuerda que la carpeta Files durante la ejecución es una carpeta de solo lectura, no podemos modificar su contenido desde el código.
- Se puede utilizar una carpeta externa de esta manera:
WebView1.LoadUrl("file://" & file.DirRootExternal & "/web.htm")
la carpeta externa sería la tarjeta SD Card.
Se propone hacer un programa utilizando esta forma de mapa dinámico, donde podamos poner las coordenadas y que se presente el mapa en ese lugar, es decir, lo mismo que hacíamos con el mapa estático, pero en este caso con mapa dinámico.
Mediante la API de Google Maps, podemos realizar acciones con el mapa.
________________________________________________
4.- Cuando pulso en un mapa de Google en el móvil, obtengo sus coordenadas.
Este ejemplo se basa en el anterior, en este caso cuando pulso sobre un lugar del mapa de Google,
obtengo las coordenadas de ese punto, que puedo guardar en una base de datos, por ejemplo.
En este caso solo mostrará las coordenadas mediante un MsgBox.
- Esta aplicación está basada en la API de Google, que podemos ver en API de JavaScripts de Google Maps.
- También vamos a necesitar la biblioteca WebViewExtras.
Creamos un nuevo proyecto con este contenido:
Copia y pega este código en un nuevo proyecto |
' Juan Antonio Villalpando
' juana1991@yahoo.com
' marzo 2013
Sub Process_Globals
End Sub
Sub Globals
Dim WebView1 As WebView
Dim MyWebViewExtras As WebViewExtras
End Sub
Sub LatitudLongitud(LatStr As String, LngStr As String)
Dim Lat As Double
Dim Lng As Double
Lat = LatStr
Lng = LngStr
Msgbox("Latitud=" & Lat & " Longitud=" & Lng, "Latitud-Longitud")
End Sub
Sub Activity_Create(FirstTime As Boolean)
WebView1.Initialize("WebView1")
MyWebViewExtras.addJavascriptInterface(WebView1, "juanantonio")
Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
WebView1.LoadUrl("file:///android_asset/web.htm")
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause (UserClosed As Boolean)
End Sub |
|
Ahora crea un archivo llamado web.htm con el contenido de la tabla inferior y cópialo en la carpeta Files del proyecto que estás realizando.
Copia este código como web.htm y guárdalo en la carpeta Files |
<html>
<head>
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true&libraries=drawing'></script>
<script type='text/javascript'>
var drawingManager; var myLatlng = new google.maps.LatLng(36.6, -6.1);
var map;
function initialize() {map = new google.maps.Map(document.getElementById('map_canvas'), {zoom: 12,center: myLatlng, mapTypeId: google.maps.MapTypeId.TERRAIN, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, disableDefaultUI: true,zoomControl: true,streetViewControl: true, scrollwheel: true, disableDoubleClickZoom: false, draggable: true, keyboardShortcuts: true, mapTypeControl: true,navigationControl: true, scaleControl: true, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT },navigationControlOptions: { style: google.maps.NavigationControlStyle.DEFAULT }})
google.maps.event.addListener(map, 'click', function (mouseEvent) { var lat=mouseEvent.latLng.lat(); var lng=mouseEvent.latLng.lng(); juanantonio.CallSub('LatitudLongitud', true, lat, lng); });
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(36.6, -6.1), map: map, title: 'A', clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/arrow.png' });}
google.maps.event.addDomListenerOnce(window, 'load', initialize);
</script>
</head>
<body onload=initialize()>
<div id='map_canvas' style='width:100%; height:100%'>
</div>
</body>
</html>
|
Comentario.
- En este proyecto nos fijamos en estas líneas del código:
Sub LatitudLongitud(LatStr As String, LngStr As String)
Es la Subrutina a la que llama el código JavaScrit del mapa.
MyWebViewExtras.addJavascriptInterface(WebView1, "juanantonio")
Añade a WebView1 el código "juanantonio" que se encuentra en el JavaScript del mapa.
google.maps.event.addListener(map, 'click', function (mouseEvent) { var lat=mouseEvent.latLng.lat(); var lng=mouseEvent.latLng.lng(); juanantonio.CallSub('LatitudLongitud', true, lat, lng); });
Cuando hacemos 'click' en nuestro map, el ratón toma la longitud y latitud de ese punto,
y llama a la Subrutina 'LatitudLongitud' que se encuentra en el módulo juanantonio de WebView1 de nuestra aplicación.
________________________________________________
5.- Trayectoria en un mapa de Google.
En este caso vamos a ver una trayectoria entre dos puntos, lo he realizado mediante Intent.
Copia y pega este código en un nuevo proyecto |
Dim Intent1 As Intent
ura="http://maps.google.com/maps?saddr=36.35892,-6.05781&daddr=36.756054,-6.098695"
Intent1.Initialize(Intent1.ACTION_VIEW,ura)
StartActivity(Intent1)
|
Pulsa:
https://maps.google.com/maps?saddr=36.35892,-6.05781&daddr=36.756054,-6.098695
Escribimos las coordenadas de un punto de partida (saddr) y un punto de llegada (daddr) y nos dibuja la trayectoria por carretera.
________________________________________________
6.- Varias marcas en el mapa.
Copia este código en un archivo llamado web4.htm |
<div id="map1div" style="height: 400px;"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyD3VSb2IYSKdPdcDWFffqh0pGy9S47Klzk"></script>
<script type="text/javascript">
function map1_initialize( ) {
var cwc2011_venue_data = [ {
name: "Eden Gardens, India",
latlng: new google.maps.LatLng( 22.564444, 88.343333 )
}, {
name: "Feroz Shah Kotla, India",
latlng: new google.maps.LatLng( 28.637778, 77.243056 )
}, {
name: "M. A. Chidambaram Stadium, India",
latlng: new google.maps.LatLng( 13.062778, 80.279444 )
}, {
name: "M. Chinnaswamy Stadium, India",
latlng: new google.maps.LatLng( 12.978806, 77.599556 )
}, {
name: "Mahinda Rajapaksa International Stadium, Sri Lanka",
latlng: new google.maps.LatLng( 6.804265, 79.987488 )
}, {
name: "Narayanganj Osmani Stadium, Bangladesh",
latlng: new google.maps.LatLng( 23.650161, 90.488811 )
}, {
name: "Pallekele International Cricket Stadium, Sri Lanka",
latlng: new google.maps.LatLng( 7.280278, 80.722222 )
}, {
name: "Punjab Cricket Association Stadium, India",
latlng: new google.maps.LatLng( 30.690858, 76.737258 )
}, {
name: "R. Premadasa Stadium, Sri Lanka",
latlng: new google.maps.LatLng( 6.939667, 79.872028 )
}, {
name: "Sardar Patel Stadium, India",
latlng: new google.maps.LatLng( 23.091667, 72.5975 )
}, {
name: "Sher-e-Bangla Cricket Stadium, Bangladesh",
latlng: new google.maps.LatLng( 23.806917, 90.363583 )
}, {
name: "Sinhalese Sports Club Ground, Sri Lanka",
latlng: new google.maps.LatLng( 6.905922, 79.869403 )
}, {
name: "Vidarbha Cricket Association Stadium, India",
latlng: new google.maps.LatLng( 21.013572, 79.039603 )
}, {
name: "Wankhede Stadium, India",
latlng: new google.maps.LatLng( 18.938917, 72.825722 )
}, {
name: "Zohur Ahmed Chowdhury Stadium, Bangladesh",
latlng: new google.maps.LatLng( 22.355803, 91.767919 )
} ];
var map = new google.maps.Map( document.getElementById( "map1div" ), {
center: new google.maps.LatLng( 0, 0 ),
zoom: 0,
mapTypeId: google.maps.MapTypeId.ROADMAP
} );
for ( var i = 0; i < cwc2011_venue_data.length; i++ ) {
new google.maps.Marker( {
position: cwc2011_venue_data[ i ].latlng,
map: map,
title: cwc2011_venue_data[ i ].name
} );
}
var latlngbounds = new google.maps.LatLngBounds( );
for ( var i = 0; i < cwc2011_venue_data.length; i++ ) {
latlngbounds.extend( cwc2011_venue_data[ i ].latlng );
}
map.fitBounds( latlngbounds );
new google.maps.Rectangle( {
bounds: latlngbounds,
map: map,
fillColor: "#000000",
fillOpacity: 0.2,
strokeWeight: 0
} );
}
google.maps.event.addDomListener( window, 'load', map1_initialize );
</script>
|
Más sobre mapas de Google
Más sobre API de Google Maps