2024

API DE
GOOGLE MAPS

Incorpore mapas a sus

sitios web usando Google
Maps
Contenido
Objetivos de la Clase ..................................................................................................................... 3
1. La Consola de Google Maps ...................................................................................................... 3
Obtener el API Key .................................................................................................................... 3
2. Incorporando el Mapa ............................................................................................................... 3
HTML y CSS ................................................................................................................................ 3
3. Personalizar el Mapa ................................................................................................................. 4
Crear Estilos con Google Maps Styling Wizard.......................................................................... 4
Ejemplo de Código JSON para Estilos ............................................................................ 4
4. Dibujar Formas en el Mapa ...................................................................................................... 4
Ejemplo de un Círculo ............................................................................................................... 4
5. Eventos del Mapa ..................................................................................................................... 5
Agregar Eventos ........................................................................................................................ 5
6. Geolocalización y Búsquedas ................................................................................................... 5
Obteniendo la Ubicación del Usuario ...................................................................................... 5
7. Importando Datos GeoJSON ..................................................................................................... 5
Uso de GeoJSON........................................................................................................................ 5
Ejemplo de Datos GeoJSON ............................................................................................. 5
¿Qué es GeoJSON y para qué se usa? ........................................................................................... 6
¿Qué son las propiedades en GeoJSON? .................................................................................. 6
Diferencia entre incluir o no propiedades ................................................................................ 6
Caso Real de Implementación ...................................................................................................... 8
Aplicación de Rutas para Bicicletas.......................................................................................... 8
Implementación de la API de Google Maps .................................................................................. 8
Objetivo ..................................................................................................................................... 8
Estructura de Archivos .............................................................................................................. 8
Paso 1: Crear el archivo index.html .................................................................................... 8
Paso 2: Crear el archivo style.css ...................................................................................... 9
Paso 3: Crear el archivo script.js ...................................................................................... 9
Paso 4: Obtener la API Key ........................................................................................................ 9
Paso 5: Probar la Aplicación .................................................................................................... 10
Paso 6: Agregar Funcionalidades Adicionales ......................................................................... 10
6.1 Geolocalización ............................................................................................................. 10
6.2 Manejo de Eventos........................................................................................................ 10
Paso 7: Importar Datos GeoJSON ............................................................................................ 11
Conclusión ................................................................................................................................... 12

API de Google Maps

Objetivos de la Clase
• Incorporar mapas usando Google Maps.
• Personalizar y agregar elementos gráficos.
• Implementar geolocalización.
• Añadir interactividad mediante eventos.
• Crear y mostrar datos en formato GeoJSON.

1. La Consola de Google Maps

Obtener el API Key
1. Ir a la Consola de Google Cloud: Google Cloud Console
2. Crear un nuevo proyecto o seleccionar uno existente.
3. Habilitar la API de Google Maps.
4. Generar una API Key en la sección de credenciales.

2. Incorporando el Mapa
HTML y CSS
<style>
/* Establece el tamaño del mapa */
#map {
height: 400px;
width: 100%;
}
</style>

<div id="map"></div>

JavaScript para Inicializar el Mapa

<script src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap"
async defer></script>
<script>
function initMap() {
 const ubicacion = { lat: -34.397, lng: 150.644 };
const mapa = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: ubicacion,
});
const marcador = new google.maps.Marker({
position: ubicacion,
map: mapa,
});
}
</script>

3. Personalizar el Mapa
Crear Estilos con Google Maps Styling Wizard
Visita: Google Maps Styling Wizard

Ejemplo de Código JSON para Estilos

[
{
"elementType": "geometry",
"stylers": [{ "color": "#f5f5f5" }]
},
{
"featureType": "water",
"elementType": "labels.text.fill",
"stylers": [{ "color": "#9e9e9e" }]
}
]

Aplicando Estilos en el Mapa

const estilosMapa = [ /* Código JSON de formato */ ];

function initMap() {
const ubicacion = { lat: -34.397, lng: 150.644 };
const mapa = new google.maps.Map(document.getElementById("map"), {
zoom: 8,
center: ubicacion,
styles: estilosMapa, // Aplica los estilos aquí
});
const marcador = new google.maps.Marker({
position: ubicacion,
map: mapa,
});
}

4. Dibujar Formas en el Mapa

Ejemplo de un Círculo
const circulo = new google.maps.Circle({
strokeColor: "#FF0000",
strokeOpacity: 0.8,
strokeWeight: 2,
 fillColor: "#FF0000",
fillOpacity: 0.35,
map: mapa,
center: ubicacion,
radius: 100,
});

5. Eventos del Mapa

Agregar Eventos
map.addListener("click", (event) => {
alert(`Hiciste clic en: \nLatitud: ${event.latLng.lat()} \nLongitud:
${event.latLng.lng()}`);
});

marcador.addListener("click", () => {
alert("Hiciste clic en el marcador");
});

6. Geolocalización y Búsquedas
Obteniendo la Ubicación del Usuario
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
map.setCenter(pos);
const marker = new google.maps.Marker({
position: pos,
map: map,
title: "Estás aquí",
});
}, () => {
manejarError(true, map.getCenter());
});
} else {
manejarError(false, map.getCenter());
}

7. Importando Datos GeoJSON

Uso de GeoJSON
GeoJSON es un formato estándar para representar datos geoespaciales.

Ejemplo de Datos GeoJSON

const geojsonData = { /* Datos GeoJSON */ };

map.data.addGeoJson(geojsonData);
map.data.setStyle({
fillColor: 'green',
 strokeColor: 'blue',
strokeWeight: 2
});

¿Qué es GeoJSON y para qué se usa?

GeoJSON es un formato de intercambio de datos que permite representar
información geográfica. Se utiliza comúnmente para mostrar características
geográficas en mapas, como puntos, líneas y polígonos.

¿Qué son las propiedades en GeoJSON?

Las propiedades en un objeto GeoJSON son metadatos adicionales que
acompañan a una característica geográfica. Estas propiedades pueden incluir
cualquier tipo de información que desees mostrar o usar, como:
• Nombre: El nombre de un lugar o entidad (ej. "Ubicación Ejemplo").
• Descripción: Información adicional sobre la característica.
• Categoría: Clasificaciones como "parque", "edificio", "río", etc.
• Datos numéricos: Cualquier otro tipo de dato relevante (ej. población,
área, etc.).

Diferencia entre incluir o no propiedades

1. Sin Propiedades:
o Si no incluyes propiedades, la característica (punto, línea o
polígono) solo tendrá una forma geométrica. Esto significa que no
podrás mostrar información adicional al usuario. Por ejemplo, al
hacer clic en el punto en el mapa, no habrá datos que mostrar.
o Ejemplo de GeoJSON sin propiedades:

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-12.108099937438965, -76.95555877685547]
}
}
]
}

2. Con Propiedades:
 • Al incluir propiedades, puedes proporcionar contexto o información relevante sobre la
característica. Esto es útil para mejorar la experiencia del usuario, permitiendo que
interactúen con el mapa y obtengan más información al hacer clic en él.

• Ejemplo de GeoJSON con propiedades:

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-12.108099937438965, -76.95555877685547]
},
"properties": {
"name": "Ubicación Ejemplo"
}
}
]
}

Ejemplo Práctico
Supongamos que tienes un mapa que muestra varias ubicaciones de interés. Si
cada ubicación tiene un nombre y una descripción:
• Sin propiedades: Al hacer clic en el mapa, no obtendrás información, lo
que puede hacer que la experiencia del usuario sea insatisfactoria.
• Con propiedades: Al hacer clic, puedes mostrar un alert o un tooltip con el
nombre y la descripción de la ubicación, mejorando la interactividad y la
utilidad del mapa.
Cargando Datos en script.js
Cuando cargas datos GeoJSON en tu archivo script.js, puedes acceder a las
propiedades para mostrarlas al usuario. Por ejemplo:
mapa.data.addListener('click', (event) => {
const nombre = event.feature.getProperty('name'); // Accede a la propiedad 'name'
alert(`Hiciste clic en: ${nombre}`);
});

En Resumen
• Incluir propiedades en tu archivo GeoJSON permite enriquecer la
información que se presenta en el mapa y mejora la interacción del
usuario.
• No incluir propiedades limita la utilidad de los datos, ya que solo se
mostrarían formas geométricas sin contexto ni información adicional.
Caso Real de Implementación
Aplicación de Rutas para Bicicletas
Descripción: Una aplicación que permite a los usuarios visualizar rutas para
bicicletas en su ciudad.

1. Objetivo: Mostrar rutas seguras y puntos de interés (estaciones de

bicicletas, reparaciones).
2. Funcionalidades:
o Mapa interactivo que muestra rutas.
o Geolocalización para que los usuarios vean su posición actual.
o Eventos que permiten a los usuarios interactuar con el mapa (clic en rutas
para más información).
o Carga de datos GeoJSON para representar rutas y estaciones.
3. Implementación:
o Usar Google Maps API para crear el mapa.
o Añadir marcadores para estaciones de bicicletas.
o Permitir a los usuarios ver su ubicación y rutas cercanas.

Implementación de la API de Google Maps

Objetivo
Aprender a incorporar y personalizar un mapa utilizando la API de Google Maps, así
como implementar funciones de geolocalización y manejar eventos.

Estructura de Archivos
mi-proyecto-google-maps/

│
├── index.html # Archivo HTML principal
├── style.css # Estilos CSS para tu mapa y otros elementos
├── script.js # Archivo JavaScript para la lógica del mapa
├── geojson/ # Carpeta para archivos GeoJSON (opcional)
│ └── data.geojson # Archivo GeoJSON con datos geoespaciales (opcional)
└── README.md # Documentación del proyecto (opcional)

Paso 1: Crear el archivo index.html

1. Crea un nuevo archivo llamado index.html.
2. Agrega la siguiente estructura básica:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Proyecto Google Maps</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Mapa de Google</h1>
<div id="map"></div>

<script

src="https://maps.googleapis.com/maps/api/js?key=TU_API_KEY&callback=initMap&libraries=mar
ker"
async
defer>
</script>

<script src="script.js"></script>
</body>
</html>

Nota: Reemplaza TU_API_KEY con tu API Key obtenida de la Consola de Google Cloud.

Paso 2: Crear el archivo style.css

1. Crea un nuevo archivo llamado style.css.
2. Agrega el siguiente estilo para el mapa:

#map {
height: 400px; /* Altura del mapa */
width: 100%; /* Ancho del mapa */
}

Paso 3: Crear el archivo script.js

1. Crea un nuevo archivo llamado script.js.
2. Agrega la lógica para inicializar el mapa:

function initMap() {
// Coordenadas iniciales
const ubicacion = { lat: - 12.108099937438965, lng: -76.95555877685547 };
const mapa = new google.maps.Map(document.getElementById("map"), {
zoom: 8, // Nivel de zoom
center: ubicacion, // Centro del mapa
});

const marcador = new google.maps.Marker({

position: ubicacion, // Posición del marcador
map: mapa, // Mapa donde se coloca el marcador
});
}

Paso 4: Obtener la API Key

1. Accede a la Consola de Google Cloud: Google Cloud Console.
2. Crea un nuevo proyecto o selecciona uno existente.
3. Habilita la API de Google Maps.
4. Genera una API Key desde la sección de credenciales y reemplaza TU_API_KEY en el
archivo index.html.
Paso 5: Probar la Aplicación
1. Abre el archivo index.html en un navegador web.
2. Deberías poder ver un mapa centrado en las coordenadas especificadas con un
marcador.

Paso 6: Agregar Funcionalidades Adicionales

6.1 Geolocalización

Para implementar la geolocalización, modifica script.js:

function initMap() {
const ubicacionDefault = { lat: -12.108099937438965, lng: -76.95555877685547 };
const mapa = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: ubicacionDefault,
});

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};

mapa.setCenter(pos);
new google.maps.Marker({
position: pos,
map: mapa,
title: "Estás aquí",
});
}, () => {
manejarError(true, mapa.getCenter());
});
} else {
manejarError(false, mapa.getCenter());
}
}

function manejarError(browserSoportaGeolocalizacion, pos) {

alert(browserSoportaGeolocalizacion ? "Error: Falló la geolocalización." : "Error: Tu
navegador no soporta geolocalización.");
mapa.setCenter(pos);
}

6.2 Manejo de Eventos

Agrega eventos en initMap:

mapa.addListener("click", (event) => {

alert(`Hiciste clic en: \nLatitud: ${event.latLng.lat()} \nLongitud:
${event.latLng.lng()}`);
});
Paso 7: Importar Datos GeoJSON
1. Crea un archivo data.geojson en la carpeta geojson/ (opcional).
2. Agrega datos GeoJSON en el archivo.

Por ejemplo:

{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [-76.95555925369263, -12.108218263374901]
},
"properties": {
"name": "Ravenna Proyectos Empresariales SAC"
}
}
]
}

3. Carga los datos en script.js:

fetch('geojson/data.geojson')
.then(response => response.json())
.then(data => {
mapa.data.addGeoJson(data);
mapa.data.setStyle({
fillColor: 'green',
strokeColor: 'blue',
strokeWeight: 2
});

// Agrega un evento de clic a las características del GeoJSON

mapa.data.addListener('click', (event) => {
const nombre = event.feature.getProperty('name');
const infoWindow = new google.maps.InfoWindow({
content: nombre,
position: event.latLng
});
infoWindow.open(mapa);
});
})
.catch(error => {
console.error('Error al cargar el GeoJSON:', error);
});

// Agrega un evento de clic al mapa

mapa.addListener("click", (event) => {
alert(`Hiciste clic en: \nLatitud: ${event.latLng.lat()} \nLongitud:
${event.latLng.lng()}`);
});
}

Al final el archivo script.js debe quedar de la siguiente forma:

async function initMap() {

const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");

const ubicacionDefault = { lat: -12.108218263374901, lng: -76.95555925369263 };

const mapa = new google.maps.Map(document.getElementById("map"), {
zoom: 15,
center: ubicacionDefault,
 mapId: "DEMO_MAP_ID" // Necesario para marcadores avanzados
});

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
const pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};

mapa.setCenter(pos);
new AdvancedMarkerElement({
position: pos,
map: mapa,
title: "Estás aquí",
});
}, () => {
manejarError(true, mapa.getCenter());
});
} else {
manejarError(false, mapa.getCenter());
}

// Cargar datos GeoJSON

fetch('geojson/data.geojson')
.then(response => response.json())
.then(data => {
mapa.data.addGeoJson(data);
mapa.data.setStyle({
fillColor: 'green',
strokeColor: 'blue',
strokeWeight: 2
});

// Agrega un evento de clic a las características del GeoJSON

mapa.data.addListener('click', (event) => {
const nombre = event.feature.getProperty('name');
const infoWindow = new google.maps.InfoWindow({
content: nombre,
position: event.latLng
});
infoWindow.open(mapa);
});
})
.catch(error => {
console.error('Error al cargar el GeoJSON:', error);
});

// Agrega un evento de clic al mapa

mapa.addListener("click", (event) => {
alert(`Hiciste clic en: \nLatitud: ${event.latLng.lat()} \nLongitud:
${event.latLng.lng()}`);
});
}

function manejarError(browserSoportaGeolocalizacion, pos) {

alert(browserSoportaGeolocalizacion ? "Error: Falló la geolocalización." : "Error: Tu
navegador no soporta geolocalización.");
mapa.setCenter(pos);
}

Conclusión
Este documento proporciona una guía paso a paso para implementar la API de
Google Maps en un proyecto web. Puedes personalizar y expandir las
funcionalidades según tus necesidades. ¡Buena suerte en tu implementación!