Cuando obtenemos las coordenadas de un lugar en el mundo, podemos acceder a mucha información al respecto. Esto incluye información climática, de tráfico, económica, de precios, entre otros.
El uso de Google Maps facilita obtener las coordenadas del lugar que seleccionamos al hacer clic con el ratón. Necesitarás registrar una clave de API de Google Maps para utilizar y mostrar mapas. Por defecto, al abrir los mapas se muestra la ubicación de Tokio, Japón, con un nivel de zoom de 6, pero puedes seleccionar otra ubicación y ajustar el nivel de zoom según los requerimientos.
1. HTML: Mostrar mapas en etiquetas html
<p id=”getLatLng”></p>
<div id=”map”></div>
2. CSS: Mostrar mapas con CSS
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
3. API KEY
Necesita registrar una CLAVE API para mostrar el mapa
<script>
function initMap() {
// Default in Tokyo Japan
var myLatlng = {lat: 35.67083724108701, lng: 139.76739407395357};
// Ex in Australia: var myLatlng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(
document.getElementById(‘map’), {zoom: 6, center: myLatlng});
// Create the initial InfoWindow.
var infoWindow = new google.maps.InfoWindow(
{content: ‘Click the map to get Lat/Lng!’, position: myLatlng});
infoWindow.open(map);
// Configure the click listener.
map.addListener(‘click’, function(mapsMouseEvent) {
// Close the current InfoWindow.
infoWindow.close();
// Create a new InfoWindow.
infoWindow = new google.maps.InfoWindow({position: mapsMouseEvent.latLng});
infoWindow.setContent(mapsMouseEvent.latLng.toString());
infoWindow.open(map);
document.getElementById(“getLatLng”).append(mapsMouseEvent.latLng.toString() + ‘ – ‘);
});
}
</script>