|
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:
NOTA: a partir de 2017 Google dejó de admitir esta manera de poner las marcas.
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&sensor=false&"></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
__________________________________
|
