Hoy voy a mostrarles algo muy fácil, Google Maps.
Hay ocasiones en las que queremos mostrar un mapa en nuestras páginas Web, Google Maps es por mucho nuestra mejor opción.
En este ejemplo les voy a mostrar como mostrar en un mapa nuestra ubicación.
La funcionalidad para mostrar la posición solo está disponible de manera local (localhost). Para poder utilizarla en una página web se requiere conexión segura; es decir, se requiere la implementación de un certificado SSL.
Comencemos
Creamos un documento HTML con el siguiente código base:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
</head>
<body>
<form id="form1">
<div>
</div>
</form>
</body>
</html>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=CLAVE_GOOGLE_MAPS"></script>
Es importante notar que necesitarás una CLAVE_GOOGLE_MAPS, para conseguirla, haz clic en este enlace.
A continuación, modificaremos el body de nuestro documento HTML. Agregaremos algunos objetos que nos ayudarán a mostrar el mapa. También le daremos un diseño estilo bootstrap:
<body>
<form id="form1" >
<div class="container">
<h1>Google Maps</h1>
<hr />
<div class="row">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-body">
<div id="map" style="width: 100%; height: 450px;"></div>
<div id="tdCursor">Lat: 0, Lng: 0</div>
</div>
</div>
</div>
</div>
</div>
</form>
</body>
<body>
<form id="form1" >
...
</form>
<script type="text/javascript">
var map;
var infowindow;;
var latitud = 23.743338;
var longitud = -99.143684;
var directionsDisplay;
var directionsService;
var myCurrentPosition;
$(document).ready(function () {
$(window).load(function () {
//Inicializar variables
infowindow = new google.maps.InfoWindow({});
directionsService = new google.maps.DirectionsService();
//Inicializar mapa
initMap();
//Obtener la posición actual
/*
Nota Importante: Esta funcionalidad solo funciona de manera local.
Para poder utilizarla en una página web se requiere conexión segura;
es decir, se requiere la utiliación de un certificado SSL.
*/
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(
function (position) {
/*Obtener coordenadas*/
console.log("Obteniendo coordenadas...");
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
myCurrentPosition = point;
map.setZoom(16);
map.setCenter(point);
google.maps.event.trigger(map, "resize");//actualizar mapa
var myPos = new google.maps.Marker({
position: point,
map: map,
icon: "../img/ico_green.png",
title: "Mi posición actual"
});
myPos.addListener('click', function () {
infowindow.setContent("<i class='glyphicon glyphicon-home'></i>" +
"<h3>Esta es mi posición actual</h3>" +
"<small><a href='www.tyrodeveloper.com'>www.tyrodeveloper.com</a></small>");
infowindow.open(map, myPos);
});
},
function (err) {
/*En caso de fallar al obtener las coordenadas*/
console.log('GPS Desactivado.');
/*Establecer la posición predeterminada*/
myCurrentPosition = new google.maps.LatLng(latitud, longitud);
}
);
}
});
});
//Funcion para inicializar mapa
function initMap() {
directionsDisplay = new google.maps.DirectionsRenderer();
map = new google.maps.Map(document.getElementById('map'), {
center: { lat: latitud, lng: longitud },
scrollwheel: false,
zoom: 13
});
directionsDisplay.setMap(map);
map.addListener("mousemove", function (event) {
displayCoordinates(event.latLng);
});
}
//Función para desplegar coordenadas del mouse
function displayCoordinates(pnt) {
var coordsLabel = document.getElementById("tdCursor");
var lat = pnt.lat();
lat = lat.toFixed(4);
var lng = pnt.lng();
lng = lng.toFixed(4);
coordsLabel.innerHTML = "Lat: " + String(lat) + " Lng: " + String(lng);
}
</script>
</body>
Llegó la hora de las pruebas
Para probar si nuestro mapa funciona, abrirmos el documento HTML en el explorador web...
No hay comentarios:
Publicar un comentario