Google Maps es un servicio de Google interactivo de mapas que facilita enormemente la ubicación física de algún punto o dirección. Nosotros podemos incluir estas funcionalidades a nuestra pagina web mediante el acceso a su API (Interfaz de Programación de Aplicaciones).
¿Que necesitamos?
Lo primero y fundamental es obtener una FREE API KEY o una clave API para poder incluirla en nuestro HTML con JavaScript.
¿Como lo hacemos?
Podemos ir al siguiente enlace y ver toda la información respectiva: Google Maps JavaScript Api Key .
También puedes ver el tutorial en YouTube : Video para obtener un API key.
Una vez que tienes el API key necesitas ubicar el punto al cual quieres hacer referencia, si no lo indicas Google Maps se ubicara según lo detecte del navegador.Hay varias formas, puedes buscar en Google y encontraras un montón de paginas que lo hacen de diferentes maneras, yo uso la siguiente pagina Coordenadas GPS que me da la longitud y latitud en forma de grados-minutos-segundos o en formato decimal que es el que usa google maps, simplemente me desplazo por el mapa hasta la dirección que quiero y hago click en ella en el mapa y la pagina actualiza los datos.
Bien ya tenemos los datos que necesitamos ahora veamos un ejemplo:
<!DOCTYPE html>
<html>
<style>
body {
background-color:black;
color:white;
}
</style>
<body>
<h1>Ubicación Centecpro</h1>
<div id="map" style="width:100%; height:500px; background:black"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(10.20557766154852, -68.00574660301208),
zoom: 19,
mapTypeId: google.maps.MapTypeId.roadmap
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfnG-z4u1dobl14nkERpx9h7NSBdMikFI&callback=myMap"></script>
</body>
</html>
Si quieres profundizar sobre todas las funciones de la API de Google Maps te recomiendo el siguiente enlace : W3School Google Maps
No hay comentarios.:
Publicar un comentario