Antes de empezar me presento comunidad, soy Alejandro García Serna, estudiante de ingeniería en sistemas en la universidad de Medellín y estudiante de los cursos: Nodejs desde cero,JavaScript desde cero,Javascript avanzado y bases de datos desde cero de EDteam.
Este artículo nace de un proyecto que estoy desarrollando usando la API de datos abiertos del gobierno colombiano, la cual la puedes ver en el siguiente enlace:
La idea de este ejercicio es generar un mapa donde por medio de marcadores se puedan ubicar fácilmente hospitales del estado colombiano en el departamento de Antioquia,aunque si tienes acceso a otra información geográfica funcionará igualmente.
Como primer paso iremos a la API de Google Maps.
https://developers.google.com/maps/documentation/javascript/?hl=es-419
En esta página obtendremos una clave necesaria para poder hacer nuestra aplicación.
Aquí pondremos el nombre de nuestro proyecto y al dar click en "CREATE AN ENABLE API" se nos habilitará la clave.
Ya teniendo esta clave estamos listos para el código.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Maps</title>
</head>
<style>
#map{
height:25em;
}
h1{
text-align: center;
}
</style>
<body>
<h1>Marcadores</h1>
<section id="map"></section>
<script src="script.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBl6mfoS8AE5woNLZSUdmVN5ZrSjM1WVn4">
</script>
</body>
</html>
En el HTML tenemos una estructura básica donde solo declaramos un section que servirá como contenedor para el mapa que traeremos desde la API de Google Maps y le daremos un height,linkeamos un archivo Javascript donde realizaremos la programación para el mapa,y por último llamaremos la API de Google Maps donde en el parámetro key debemos poner la clave que nos proporcionó la API.
const getLocations = ()=>{
fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
.then(response => response.json())
.then(locations => {
console.log(locations)
}
En el archivo script.js se hace la llamada a la API de datos abiertos por medio de fetch,la respuesta de esta petición la convertimos en JSON y la mostramos en consola.
Esta respuesta nos devuelve un array de objetos donde en la propiedad punto tendremos las coordenadas geográficas de ese lugar.
locations.forEach(location => {
let locationData = {
position:{lat:location.punto.coordinates[1],lng:location.punto.coordinates[0]},
name:location.nombre_sede
}
locationsInfo.push(locationData)
})
Teniendo ya esta información recorremos el array usando un foreach y dentro de un array previamente declarado guardamos la información de la localización de cada sitio usando el método push.
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition((data)=>{
let currentPosition = {
lat: data.coords.latitude,
lng: data.coords.longitude
}
initMap(currentPosition)
})
}
Ya fuera del foreach usamos el objeto geolocation para obtener la ubicación actual del usuario,y se la pasamos como objetos al método initMap el cual será el encargado de dibujar el mapa en el navegador.
El código completo de este método es el siguiente:
let locationsInfo = []
const getLocations = ()=>{
fetch('https://www.datos.gov.co/resource/g373-n3yy.json')
.then(response => response.json())
.then(locations => {
console.log(locations)
locations.forEach(location => {
let locationData = {
position:{lat:location.punto.coordinates[1],lng:location.punto.coordinates[0]},
name:location.nombre_sede
}
locationsInfo.push(locationData)
})
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition((data)=>{
let currentPosition = {
lat: data.coords.latitude,
lng: data.coords.longitude
}
initMap(currentPosition)
})
}
})
}
Lo siguiente es construir el metodo initMap.
let map
const initMap = (obj) =>{
map = new google.maps.Map(document.getElementById('map'),{
zoom:13,
center:obj
})
let marker = new google.maps.Marker({
position:obj,
title:'Tu ubicacion'
})
marker.setMap(map)
let markers = locationsInfo.map( (place) =>{
return new google.maps.Marker({
position: place.position,
map:map,
title:place.name
})
})
}
Este método recibe un objeto con la información sobre la geolocalización del usuario,después dentro de la variable map creará el mapa usando el constructor que nos ofrece la API de Google Maps,la cual recibe el objeto del DOM que servirá como contenedor para nuestro mapa,después como segundo parámetro recibe un objeto con el nivel de zoom que queremos para el mapa y en qué posición estará centrado.
Después se crea un marcador para la posición del usuario usando el constructor de la API y por último se crean los marcadores para cada una de las localizaciones que nos traía la API de datos abiertos,para esto usamos el método map donde convertimos cada uno de los objetos del array locationsInfo en un marcador dentro del mapa.
por último hay que invocar el método getLocations para poner en funcionamiento nuestra aplicación.
window.addEventListener('load',getLocations)
Al finalizar el ejercicio se veria algo así:
Espero que te haya gustado este ejercicio,si quieres ver el código completo lo puedes ver en el siguiente enlace.
https://codepen.io/alejogs4/pen/OOwErp
Hasta la próxima :) .