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


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

App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

49B.- Mapas de Google con marcas de sitios.

p49B_mapa_google.aia

- Inicio:

Hemos visto mapas de Google en:

5.- (MAPA GOOGLE) Acelerómetro.

8E.- (MAPA GOOGLE) FirebaseDB mapas de Google.

8F.- (MAPA GOOGLE) FirebaseDB mapas de Google.

49.- (MAPA GOOGLE) GPS + Correo + SMS + mapa de Google. Propuesta de código.

49B.- (MAPA GOOGLE) Marcas en los mapas de Google.

325.- (MAPA GOOGLE) Archivo PHP y Mapa de Google.

 

Ahora vamos a ver un mapa de Google con varias marcas de ubicación.

 

Para ello nos basamos en las API de Google.

Utilizaremos un archivo en donde pondremos las ubicaciones de nuestras marcas y un pequeño comentario de cada una de ellas.

 

 

 

Este es el archivo:

- Pulsa aquí para verlo:
pr1.htm


Copia este código en un archivo llamado pr1.htm
<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Mapa de Google - KIO.COM</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="mapa_pr" style="height: 480px; width: 300px"></div>

  <script type="text/javascript">
    var sitios = [
      ['El Muelle', 36.523924, -6.1911, 9],
      ['Centro Administrativo', 36.5258, -6.1911, 8],
      ['Iglesia San Sebastián', 36.52894, -6.1899, 7],
      ['San José', 36.52893, -6.1906, 6],
      ['Ayuntamiento', 36.528676, -6.19234, 5],
      ['La Cachucha', 36.52569, -6.1841, 4],
      ['El Porvenir', 36.53056, -6.1863, 3],
      ['Las Canteras', 36.5372, -6.1851, 2],
      ['Polideportivo', 36.5268, -6.1936, 1]
    ];

    var map = new google.maps.Map(document.getElementById("mapa_pr"), {
    center: new google.maps.LatLng(36.531, -6.189),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < sitios.length; i++) {  
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(sitios[i][1], sitios[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(sitios[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

También vamos a poner este otro, en este caso no se ve el texto cuando se pulsa en una marca.
- Pulsa aquí para verlo:

pr2.htm

Copia este código en un archivo llamado pr2.htm
<div id="mapa_pr" style="height: 480px; width: 300px"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&amp;sensor=false&amp"></script>
<script type="text/javascript">
  function sitios_pr( ) {
    var sitios = [ {
      name: "El Muelle",
      latlng: new google.maps.LatLng(36.523924, -6.1911)
    }, {
      name: "Centro Administrativo",
      latlng: new google.maps.LatLng(36.5258, -6.1911)
    }, {
      name: "Iglesia San Sebastián",
      latlng: new google.maps.LatLng(36.52894, -6.1899)
    }, {
      name: "San José",
      latlng: new google.maps.LatLng(36.52893, -6.1906)
    }, {
      name: "Ayuntamiento",
      latlng: new google.maps.LatLng(36.528676, -6.19234)
    }, {
      name: "La Cachucha",
      latlng: new google.maps.LatLng(36.52569, -6.1841)
    }, {
      name: "El Porvenir",
      latlng: new google.maps.LatLng(36.53056, -6.1863)
    }, {
      name: "Las Canteras",
      latlng: new google.maps.LatLng(36.5372, -6.1851)
    }, {
      name: "Polideportivo",
      latlng: new google.maps.LatLng(36.5268, -6.1936)
    } ];
    var map = new google.maps.Map(document.getElementById("mapa_pr"), {
      center: new google.maps.LatLng(0,0),
      zoom: 28,
      mapTypeId: google.maps.MapTypeId.SATELLITE
    } );
    for (var i = 0; i < sitios.length; i++ ) {
      new google.maps.Marker( {
        position: sitios[i].latlng,
        map: map,
        title: sitios[i].name
      } );
    }
    var latlngbounds = new google.maps.LatLngBounds( );
    for (var i = 0; i < sitios.length; i++) {
      latlngbounds.extend(sitios[i].latlng );
    }
    map.fitBounds(latlngbounds);
    new google.maps.Rectangle( {
      bounds: latlngbounds,
      map: map,
      fillColor: "#000000",
      fillOpacity: 0.0,
      strokeWeight: 0
    } );
  }
  google.maps.event.addDomListener(window, 'load', sitios_pr);
</script>

_________________
- Diseño.

 

Como ya he indicado en otros tutoriales, mientras estamos haciendo pruebas de funcionamiento en App inventor utilizarmos esta dirección del archivo:

file:///mnt/sdcard/AppInventor/assets/pr1.htm

Pero cuando lo vayamos a Generar para obtener el archivo .apk, previamente debemos cambiar la dirección del archivo a:

file:///android_asset/pr1.htm

 


_________________
- Bloques.

_________________
- Comentarios.

Si estás depurando y viendo la código de la aplicación y la estás emulando con el MIT COMPANION, tienes que poner esta dirección...

file:///mnt/sdcard/AppInventor/assets/pr1.htm

Si la aplicación ya la has "Generado" y obtenido el código QR o el archivo .apk, para la instalación, antes debes cambiar la dirección anterior y poner...

file:///android_asset/pr1.htm

- Aquí viene bien explicado los mapas de Google.

_________________
- Otro ejemplo de mapas de Google:

http://appinventor.mit.edu/explore/displaying-maps.html

__________________________________

- 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