A veces no tomamos algunos cursos porque no dominamos del todo el idioma en el que esta, sin poder entender del todo lo que dictan es difícil de llevar , para eso podemos usar la opción de traductor que tiene Google Chrome.
Vamos al curso de edx.org, en este caso estoy inscrito en AWS Developer: Building on AWS
Antes con solo indicar que se traduzca la página , las subtítulos del video también se traducían (esta forma aún funciona en Udemy,com )
En este ejemplo integro Firebase Realtime y google maps para poder ver en tiempo real las posiciones, de conductores para este ejemplo, y ver algunos datos básicos en un popup al clicar sobre sus pines.
Mejoras pendientes: – Centrar el mapa por click – Mostrar el icono del pin en la dirección del movimiento del conductor – Cambiar el icono del conductor dependiendo de su tipo – …
let map;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
});
}
Errores:
Error RefererNotAllowedMapError: Al colocarlo como está, obtengo el error RefererNotAllowedMapError en consola, parece que se tiene que autorizar la url desde donde se llamara al mapa.
Crear o escoger un proyecto en Google Cloud Console ( crear: https://console.cloud.google.com/projectcreate )
Ir a las credenciales ( https://console.cloud.google.com/apis/credentials ) y crear credenciales, escoger “Clave Api”
Luego click en “Restringir Clave”, luego en el panel seleccionar “URL de referencia” y abajo agregar los sitios desde donde se llamara.
Mas abajo en restricciones api, seleccionar map api, que no aparecerá, la documentación dice que se debe habilitar. Habilitar Map Api, buscandolo en la biblioteca de apis y habilitarlo
Volviendo al paso anterior ya aparece api maps, y seleccionarlo.
Luego copiar el api key en la llamada al script. ( puede demorar en hacer efecto 5 minutos )
Error: No muestra el mapa Es posible que este error solo sea por los estilos de mi sitio, el problema es que al cargar carga por defecto el div map con los estilos:
El texto “For development purpose only” según la documentación se quitara una ves se habilite la facturación.
Listo. Ya vemos un mapa.
Lo siguiente es conectar a firebase realtime para escuchar la posición de cada conductor.
La logica es:
Escuchar la ruta principal del nodo de posiciones ( esto variará de cómo hizo el esquema no relacional cada uno).
Obtener el nodo raíz , que en nuestro caso es el ID y los dos nodos hijos que son las pociones Latitud y Longitud.
Agregar estos datos a un array o matriz, o actualizarlo en caso exista.
Según el array también se sabe si ya se agrego un marcador en el mapa, el cual se agrega o actualiza.
Listo.
Empezamos.
Escuchar la ruta principal del nodo de posiciones ( esto variará de cómo hizo el esquema no relacional cada uno).
Agregamos los script para firebase realtime database
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
Configuramos Firebase
<script>
// TODO: Replace the following with your app's Firebase project configuration
var firebaseConfig = {
apiKey: "??",
// authDomain: "??",
databaseURL: "??",
projectId: "??",
storageBucket: "??",
appID: "??",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
Para obtener apiKey, ir a configuración y luego General>”Clave api de la web”
Para databaseurl , ir a realtime database>datos>click en clip y copiar la url de la base de datos
projectId, es el ID del projecto, que esta en configuración>general>Id Del Proyecto.
Con la configuración ya podemos escuchar los cambios en la base de datos, colocando el siguiente script
Agregar estos datos a un array o matriz, o actualizarlo en caso exista.
Analizando esto va depende como referencia los marcadores, con eso implementado decidiré como guardarlos.
Según el array también se sabe si ya se agrego un marcador en el mapa, el cual se agrega o actualiza.
Para agregar un markador, siguiendo el tutorial de google maps https://developers.google.com/maps/documentation/javascript/markers#add , con los datos que obtuvimos de lat lon y iddriver
Si se deja como esta, cuando se actualiza la posición aparece otro marcador
para eso asociamos el marcador a una hashmap, creamos un hashmap y creamos una función que se encarga de validar si existe o no.
var markers = {};
function addMarker($id,$lat,$lon){
$idDriver = 'driver_'+$id;
if($idDriver in markers){
console.log("existe");
//existe
var latlng = new google.maps.LatLng($lat,$lon);
markers[$idDriver].setPosition(latlng);
}
else{
console.log("no existe");
//no existe
$myLatLng = { lat: $lat, lng: $lon };
markers[$idDriver] = new google.maps.Marker({
position: $myLatLng,
map,
title: "Conductor "+$idDriver
});
}
}
**Como el mapa carga asincronamente es posible que firebase cargue primero, para eso firebase cargara despues de que inicie el mapa, moviendo un poco el orden quedaría asi.
<!--MAPS-->
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<script
src="https://maps.googleapis.com/maps/api/js?key=XXXXXX&callback=initMap&libraries=&v=weekly"
defer
></script>
<!--FIREBASE-->
<!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
<!-- Firebase App (the core Firebase SDK) is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-app.js"></script>
<!-- Add Firebase products that you want to use -->
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-database.js"></script>
<!--INI FIREBASE-->
<script>
var markers = {};
function addMarker($id,$lat,$lon){
$idDriver = 'driver_'+$id;
if($idDriver in markers){
console.log("existe");
//existe
var latlng = new google.maps.LatLng($lat,$lon);
markers[$idDriver].setPosition(latlng);
}
else{
console.log("no existe");
//no existe
$myLatLng = { lat: $lat, lng: $lon };
markers[$idDriver] = new google.maps.Marker({
position: $myLatLng,
map,
title: "Conductor "+$idDriver
});
}
}
function configurarFirebase() {
var firebaseConfig = {
apiKey: "XXXXXX",
databaseURL: "XXXXXX",
projectId: "XXXXXX"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
var logref = firebase.database().ref('xxxxxx/position');
logref.on('value', function(snapshot) {
console.log("Entro");
console.log(snapshot.val());
$driverIds = Object.getOwnPropertyNames(snapshot.val());
$driverIds.forEach( function(valor, indice, array) {
$lat = snapshot.val()[valor].position.lat;
$lon = snapshot.val()[valor].position.lon;
$idDriver = valor.replace("driver_", "");
console.log($lat,$lon,$idDriver);
addMarker($idDriver,$lat,$lon);
});
});
}
</script>
<!--FIN FIREBASE-->
<!--INI MAPA-->
<script>
let map;
function initMap() {
console.log("cargo");
var mapOptions = {
center: new google.maps.LatLng(-2.048905, -6.968220),
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID,
scrollwheel: true,
draggable: true,
panControl: true,
zoomControl: true,
mapTypeControl: true,
scaleControl: true,
streetViewControl: true,
overviewMapControl: true,
rotateControl: true,
};
map = new google.maps.Map(document.getElementById("map"),mapOptions);
configurarFirebase();
}
</script>
<!--FIN MAPA-->
Segundo Después en el archivo agregamos una linea para el nuevo dominio en local
192.168.10.10 nuevositio.test
Al terminar de editar ctrl+x , tecla “Y” y yes para salvar los cambios
Tercero editamos el archivo de homestead con el comando
homestead edit
En el archivo, agregamos: la ruta a su carpeta en loca, la ruta en la maquina virtual, a que dominio apunta y la nueva BD en caso necesitemos, en folders,sites y databases, las rutas pueden variar dependiendo del proyecto