// inicializa variables globales var map, lat, lng, latini, lngini; $(function () { localStorage.posicion = localStorage.posicion || '[]'; // variable que almacena en localStorage var rute = JSON.parse(localStorage.posicion); var nuevaPos; // muestra ruta entre marcas anteriores y actuales function Ruta(origen, destino) { map.drawRoute({ origin: origen, // origen en coordenadas anteriores destination: destino, // destino en coordenadas del click o toque actual travelMode: 'walking', // driving, bicycling or walking. strokeColor: '#0099ff', strokeOpacity: 0.6, strokeWeight: 5 }); map.addMarker({ lat: destino[0], lng: destino[1], infoWindow: { content: '

Destino

' } }); // pone marcador en mapa map.setCenter(lat, lng); //centra el mapa en el ultimo marcador } // fin de func Ruta // function enlazarMarcador(e) { lat = e.latLng.lat(); // guarda coords para marca siguiente lng = e.latLng.lng(); nuevaPos = [lat, lng]; if (rute.length > 0) { Ruta(rute[rute.length - 1], nuevaPos); map.fitZoom(); // Ajustar zoom para mostrar todos los marcadores en la vista } else { map.addMarker({ lat: lat, lng: lng }); // pone marcador en mapa } rute.push(nuevaPos); localStorage.posicion = JSON.stringify(rute); // guardamos la ruta serializada en localStorage } // fin de func enlazarMarcador function geolocalizar() { GMaps.geolocate({ success: function (position) { // si no existe ruta anterior es la ubicación actual if (rute.length === 0) { lat = position.coords.latitude; // guarda coords en lat y lng lng = position.coords.longitude; nuevaPos = [lat, lng]; rute.push(nuevaPos); localStorage.posicion = JSON.stringify(rute); // serializa un objeto en un JSON // si existe la ruta es la posisión primera de nuestro array } else { lat = rute[0][0]; lng = rute[0][1]; } map = new GMaps({ // muestra mapa centrado en coords [lat, lng] el: '#map', lat: lat, lng: lng, click: enlazarMarcador, tap: enlazarMarcador }); // si el Array posee un elemento agrega un marcador if (rute.length > 0) { map.addMarker({ // marcador en [lat, lng] lat: rute[0][0], lng: rute[0][1], title: 'Tu ubicación', infoWindow: { content: '

Tu ubicación

' } }); latini = lat; // marcador inicial, primer punto de la ruta lngini = lng; } // si el Array tiene mas de un elemento utiliza la funcion Ruta para agregar las marcas // reproduce la ruta anterior // if (rute.length > 1) { var i; for (i = 1; i < rute.length; i++) { Ruta(rute[i - 1], rute[i]); } map.fitZoom(); // Ajustar zoom para mostrar todos los marcadores en la vista } }, error: function (error) { alert('Geolocalización falla: ' + error.message); }, not_supported: function () { alert('Su navegador no soporta geolocalización'); } }); } // fin de func geolocalizar function limpiar() { if (map) { map.cleanRoute(); // borra la ruta map.removeMarkers(); // elimina marcadores if (latini && lngini) { map.addMarker({ lat: latini, lng: lngini, title: 'Tu ubicación', infoWindow: { content: '

Tu ubicación

' } }); //posiciona marcador inicial map.setCenter(latini, lngini); //centra el mapa } rute = JSON.parse(localStorage.posicion); // deserializa un JSON en un objeto rute.splice(1, rute.length); // Elimina los elementos del array menos el primero } } // fin func limpiar function inicializar() { latini = undefined; // borramos para que limpiar no posicione marcador lngini = undefined; limpiar(); rute = []; //borramos localStorage.removeItem('posicion'); //eliminamos geolocalizar(); } // fin func inicializar function compactar(){ if (rute.length > 2) { map.cleanRoute(); // borra la ruta map.removeMarkers(); // elimina marcadores rute.splice(1, rute.length - 2); // extrae el primer y ultimo elemento del array localStorage.posicion = JSON.stringify(rute); // guardamos la ruta serializada en localStorage geolocalizar(); } } // fin fuc compactar $('#limpiar').on('click', function () { limpiar(); }); $('#compactar').on('click', function () { compactar(); }); $('#inicializa').on('click', function () { inicializar(); }); // pantalla tactil $('#limpiar').on('tap', function () { limpiar(); }); $('#compactar').on('tap', function () { compactar(); }); $('#inicializa').on('tap', function () { inicializar(); }); geolocalizar(); });// fin Geolocalización — GMaps Final
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } @font-face { font-family: 'icomoon'; src:url('../fonts/icomoon.eot?zeasxf'); src:url('../fonts/icomoon.eot?#iefixzeasxf') format('embedded-opentype'), url('../fonts/icomoon.woff?zeasxf') format('woff'), url('../fonts/icomoon.ttf?zeasxf') format('truetype'), url('../fonts/icomoon.svg?zeasxf#icomoon') format('svg'); font-weight: normal; font-style: normal; } [class^="icon-"], [class*=" icon-"] { font-family: 'icomoon'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-home3:before { content: "\e902"; } .icon-location:before { content: "\e947"; } .icon-location2:before { content: "\e948"; } .icon-map:before { content: "\e94b"; } .icon-map2:before { content: "\e94c"; } .icon-spinner11:before { content: "\e984"; } .icon-shrink:before { content: "\e98a"; } .icon-menu:before { content: "\e9bd"; } .icon-menu4:before { content: "\e9c0"; } .icon-loop2:before { content: "\ea2e"; } body { font-family: 'Droid Sans', sans-serif; min-width: 319px; /* para IE6 */ width: expression(document.body.clientWidth < 301? "300px": "auto" ); } span.titulomenu { display: inline-block; font-size: 30px; font-weight: bold; margin: 10px auto 0; } #map{ display: block; margin: 0; padding: 0; position: absolute; /* posición absoluta a navegador */ top: 48px; /* debajo de borde de navegador */ left: 0; /* ajusta a borde de navegador */ right: 0; bottom: 0; background: rgba(0,255,0,0.5); /* verde si no hay mapa */ } .piefijo { width: auto; height: auto; color: blue; position: fixed; /* Fija el contenedor a una posición */ bottom: 0; /* El div se sitúa abajo */ z-index: -50; /* Lo muestra por encima de otros div */ padding: 3px; margin: 5px; } .clearfix { clear: both; } nav { background: gradient(linear, center top, center bottom, from(#fff), to(#ccc)); background: -moz-gradient(linear, center top, center bottom, from(#fff), to(#ccc)); background: -webkit-gradient(linear, center top, center bottom, from(#fff), to(#ccc)); background-image: linear-gradient(#fff, #ccc); box-shadow: 0 0 4px 2px rgba(0,0,0,0.4); padding: 0 10px; position: relative; } .menu li { float: right; position: relative; z-index: 20; } .menu li a { color: rgb(68, 68, 68); display: block; font-size: 18px; line-height: 10px; margin-right: 50px; padding: 14px; text-decoration: none; } .menu li a:hover { background: -moz-gradient(linear, center top, center bottom, from(#ededed), to(#fff)); background: -webkit-gradient(linear, center top, center bottom, from(#ededed), to(#fff)); background: gradient(linear, center top, center bottom, from(#ededed), to(#fff)); background-image: linear-gradient(#ededed, #fff); box-shadow: inset 0 0 1px 1px rgba(0,0,0,0.1); color: #222; } [class^="icon-"] { padding-right: 10px; } /* Dropdown styles */ .menu ul { display: none; position: absolute; left: -9999px; list-style: none; opacity: 0; transition: opacity 1s ease; } .menu ul li { float: none; } .menu ul a { white-space: nowrap; } /* Displays the dropdown on hover and moves back into position */ .menu li:hover ul { display: block; background: rgba(255,255,255,0.7); box-shadow: inset 0 2px 4px rgba(0,0,0,0.4); left: -2px; opacity: 1; } @media screen and (max-width: 500px) { span.titulomenu { font-size: 16px; margin: 14px auto 0; } .menu li a { font-size: 20px; margin-right: 35px; } }