App inventor. Mapa de Google. Archivo PHP

| 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:

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

--- PHP y MySQL en App Inventor 2 --

Volver al índice del tutorial de PHP y MySQL

____________________________

325.- Archivo, PHP y Mapa de Google.

p325_php_mapa_google.aia

NOTA: a partir de 2017 Google dejó de admitir esta manera de poner las marcas.

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.

- Vamos a basarnos en el 49Bmapagoogle.htm.

- Mediante el GPS vamos a obtener las coordenadas (Latitud y Longitud) donde nos encontramos.

- Y vamos a realizar una página web, subida a nuestro hosting (317_hosting_gratuito_3.htm), para que cualquiera desde el móvil o desde su ordenador entre en esa página web y mediante un mapa de Google vea donde nos encontramos.

_____________________________
- Inicio.

- Nos vamos a basar en este archivo visto en... 49Bmapagoogle.htm.

- Veamos el archivo pr1.htm

- Observamos los carácteres rojos en negrita.

- Debemos tener un archivo en donde el código pueda ir agregando las coordenadas de la forma:

["18 - 12" , 36.523924, -6.1911, 0], (En el primer dato, por ejemplo "18 - 12", pondremos hora y minuto, y el último lo pondremos a siempre a cero).

- Además necesitamos la coordenada para centrar el mapa a la pantalla del móvil:

center: new google.maps.LatLng(36.531, -6.189),

- En nuestro código PHP tendremos el archivo dividido en varias partes e iremos agregando las coordenadas en sus sitios correspondientes.

- Así es como se ve este archivo en la web: http://kio4.esy.es/pr_1.htm

Código de otro tutorial, nos basaremos en este: pr_1.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>

_____________________________
- Empezamos.

- Debemos crear el archivo pr_a.htm.

- Fíjate que es la parte de arriba del archivo anterior, antes de las coordenadas.

Copia este código en un archivo llamado pr_a.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 = [

- También debemos crear el archivo pr_b.htm

- Fíjate que es la parte de abajo del archivo anterior, después de las coordenadas de centrado.

Copia este código en un archivo llamado pr_b.htm

),
      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>

- Pues bien, entre esos dos archivos debemos agregar la parte de los datos, algo así...

	  
      ["18 - 12", 36.523924, -6.1911, 0],
      ["18 - 21", 36.5258, -6.1911, 0],
    
    ];

    var map = new google.maps.Map(document.getElementById("mapa_pr"), {
    center: new google.maps.LatLng(36.531, -6.189

- Si unimos:

el pr_a.htm + la parte de los datos + pr_b.htm

- Obtendremos el archivo pr_final.htm que será el archivo que tendrá toda la información para presentar el mapa.

- Los archivos pr_a.htm y pr_b.htm, ya los tenemos, lo complicado será unirlos con los datos intermedios, es decir introducir la parte de los datos.

- Manos a la obra.

_________________
- Diseño.

- Fíjate que hay un VisorWeb y un Web.

_________________
- Bloques.

- Cuando pulsamos el Botón, se tomará la Latitud y Longitud del SensorDeUbicación (GPS).

- Se presentará en los CampoDeTextos y en la Etiqueta.

- Se llamará al archivo PHP:

http://kio4.esy.es/pr_unir.php

con los datos de lati_long

Algo así: lati_long=36.123,-6.456

- Una vez realizado todo el proceso se verá el mapa en el móvil mediante un VisorWeb en la página

http://kio4.esy.es/pr_final.htm

- En cualquier ordenador se podría poner esa dirección y también veríamos la página web con el mapa de Google y con las marcas de ubicación.

_________________
- Código PHP.

- Esto es lo dificil de esta aplicación, entender el código PHP.

- Se recibe la información enviada por Web1.Url y lati_long=36.123,-6.345

- Se crea la $hora = date('H - i ');

- Además se crea el $lugar = ["18 - 12", 36.123, -6.345, 0]

- Se Agrega ese $lugar al final del archivo pr_a.htm

- Se crea el archivo pr_final que es igual que el pr_a.htm

- Se añade al archivo pr_final_htm la parte de coordenada de centrado:

$centrado = '];
    var map = new google.maps.Map(document.getElementById("mapa_pr"), {
    center: new google.maps.LatLng('.$lati_long;

- Se añade al pr_final.htm la parte de abajo, es decir pr_b.htm

- El archivo pr_final.htm contendrá el código del mapa de Google.

http://kio4.esy.es/pr_final.htm

Copia este código en un archivo llamado pr_unir.php

<?php
// Juan A. Villalpando
// KIO4.COM
// juana1991@yahoo.com

$datos_recibidos = $_POST;
$lati_long = $datos_recibidos['lati_long'];
// Recibe la latitud y longitud
// $lati_long = '36.123,-6.456'
date_default_timezone_set('Europe/Madrid'); 
// Hora en otros países. http://php.net/manual/en/timezones.america.php
$hora = date('H - i'); // Presenta la hora y el minuto.

$lugar = '["'.$hora.'",'.$lati_long.', 0],';
// $lugar = '[ "18 - 12",'.$lati_long.', 0],';
// Esto es lo que hay que Añadir para presentar las marcas.
// $lugar = ["18 - 12", 36.123,-6.456, 0]

// Añade: $lugar = ["18 - 12", 36.123,-6.345, 0],  al archivo pr_a.htm
$pr_a = fopen('pr_a.htm', 'a') or die("No se puede abrir el archivo.");
fwrite($pr_a, $lugar);

///////////////////////////////////////////////////////////////////////////
// Juan A. Villalpando
// KIO4.COM

// Crea el archivo pr_final.htm vacío
// El archivo está creado mediante WRITE para que se cree vacío.
$pr_final = fopen('pr_final.htm', 'w') or die("No se puede abrir el archivo.");
// Pasa todo el contenido de pr_a.htm a pr_final.htm
$content = file_get_contents('pr_a.htm');
file_put_contents('pr_final.htm', $content);
fclose($pr_final);
// Cerramos el archivo como WRITE
// En estos momentos pr_final.htm y pr_a.htm son iguales.

///////////////////////////////////////////////////////////////////////////
// Añade la parte de centrado al archivo pr_final.htm
// El archivo se abre mediante APPEND para que se pueda Añadir

// Aquí ponemos la parte del centrado y las coordenadas para centrar  .$lati_long
$centrado = '];
    var map = new google.maps.Map(document.getElementById("mapa_pr"), {
    center: new google.maps.LatLng('.$lati_long;

$pr_final = fopen('pr_final.htm', 'a') or die("No se puede abrir el archivo.");
fwrite($pr_final, $centrado);

///////////////////////////////////////////////////////////////////////////

// Añade el trozo final, es decir pr_b.htm
// Une dos archivos pr_final.htm = pr_final.htm + pr_b.htm
$content = file_get_contents('pr_b.htm');
file_put_contents('pr_final.htm', $content, FILE_APPEND);
sleep(1);
fclose($pr_a);
fclose($pr_final);
?>

_____________________________________
- Subir los archivos.

- Mediante el cliente de FTP Filezilla, subimos los archivos al servidor web.

- El archivo pr_final.htm, no hay que subirlo ya que se creará automáticamente mediante el código PHP.

- Para trabajar con este ejemplo de aplicación deberemos estar continuamente consultando mediante FTP cómo van evolucionando los archivos.

- Es conveniente que cada vez que realices una modificación del código suba los tres archivos indicados.

_____________________________________
Propuestas.

- Esto es todo amigos. Es simplemente una aplicación didáctica que evidentemente se puede mejorar, pero que he intentado explicarla y presentarla de forma sencilla par que el lector pueda entendarla y a partir de ahí, experimentar.

- El éxito de la aplicación depende de la exactitud del GPS.

- Se podría poner un Reloj para que cada 10 minutos grabara automáticamente la posición.

__________________________________
__________________________________

- Mi correo:
juana1991@yahoo.com

- KIO4.COM

- Política de cookies.

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