|     Inicio    |   |         |  |   FOROS      |  |      |      
   Elastix - VoIP B4A (Basic4Android) App inventor 2 PHP - MySQL
  Estación meteorológica B4J (Basic4Java) ADB Shell - Android Arduino
   AutoIt (Programación) Visual Basic Script (VBS) FireBase (BD autoactualizable) NodeMCU como Arduino
  Teleco - Emisora de A.M. Visual Basic Cosas de Windows Webs interesantes
Translate:
Búsqueda en este sitio:


Nuevo concurso para España, Argentina, Brasil, Chile, Colombia, Ecuador, México, Perú y Portugal.

B4A en español - Juan Antonio Villalpando
(BASIC4Android)

-- Tutorial de B4A --

Volver al índice del tutorial  

____________________________

52.- Mapas de Google. Números aleatorios.

- Tutoriales. Mapas de Google. Números aleatorios.

- 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 y ejecútalo con un navegador, verás cómo se pueden poner varias marcas en un mapa.

El código está sacado de la siguiente web...
http://salman-w.blogspot.com.es/2011/03/zoom-to-fit-all-markers-on-google-map.html

Observa que necesita una clave de usuario: key=AIzaSyD3VSb2IYSKdPdcDWFffqh0pGy9S47Klzk"

Si no te funciona, elimina la clave del código

Nuestra clave particular la podemos obtener dándonos de alta en los mapas de Google.

http://www.w3schools.com/googleAPI/


(* Nota: prueba hacer funcionar el código siguiente eliminando la
key=AIzaSyD3VSb2IYSKdPdcDWFffqh0pGy9S47Klzk)

Si no quieres que salga el recuadro, establece al final del código la fillOpacity: 0.0,

IMPORTANTE: Ver esta página de ejemplos de API

 


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&amp;sensor=false&amp;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

________________________________

- Mi correo:
juana1991@yahoo.com
- KIO4.COM - Política de cookies. Textos e imágenes propiedad del autor:
© Juan A. Villalpando
No se permite la copia de información ni imágenes.
Usamos cookies propias y de terceros que entre otras cosas recogen datos sobre sus hábitos de navegación y realizan análisis de uso de nuestro sitio.
Si continúa navegando consideramos que acepta su uso. Acepto    Más información