En esta parte veremos como integrar la Google Maps Api y crear mapas que marquen la geolocalización del usuario obtenida con la api HTML5 geolocation.
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=es
https://developers.google.com/maps/documentation/javascript/examples/map-geolocation?hl=es
Código de ejemplo. geolocalizacion.html ...
<!DOCTYPE html> <html> <head> <title>Geolocalización</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta charset="utf-8"> <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> <style> html, body, #map-canvas { height: 100%; width: 100%; margin: 0px; padding: 0px; } </style> <script> function drawMap(latlng) { var options = {zoom: 15, center: latlng}; //Creamos el mapa var map = new google.maps.Map(document.getElementById("map-canvas"), options); //Creamos el marcador con la localización del usuario var marker = new google.maps.Marker({ position: latlng, map: map, title: "¡¡¡Tu localización!!!" }); } var defaultLatLng = new google.maps.LatLng(34.0983425, -118.3267434); //Función para obtener la geolocalización con la api HTML5 y cargar el mapa function init_map(){ //Si el navegador es compatible if(navigator.geolocation) { //La localización ha sido encontrada function success(pos) { drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); } //La localización no ha sido encontrada function fail(error) { drawMap(defaultLatLng); } //Cargamos la geolocación del usuario navigator.geolocation.getCurrentPosition(success, fail); } else //Si la api html5 no funciona { drawMap(defaultLatLng); } } window.onload = function(){ init_map(); } </script> </head> <body> <div id="map-canvas"></div> </body> </html>
Vídeo tutorial de Javascript en Youtube
No hay comentarios:
Publicar un comentario