Cargando



Obtener coordenadas del cliente con API Google Maps en JavaScript (HMTL5, CSS3 y Bootstrap)

En esta ocasión estaremos haciendo uso de la API en javaScript de Google Maps, para obtener las coordenadas del cliente que se conecte a nuestra web, esto es particularmente útil para utilizarlo en formularios de contacto si necesitamos saber desde donde nos están escribiendo nuestros clientes.

Estaremos haciendo uso de HTML5, CSS3, JavaScript y Bootstrap, por cual nuestra aplicación también será compatible con dispositivos móviles.


ago 25 2015 16:20
Profesional

¿Qué necesitamos?


a) Conocimientos básicos en html, css3, javascript y bootstrap (No limitativo).
b) Un editor de código (En mi caso usare Sublime text 3).
c) Un servidor local para probar (Estaré usando Xampp server)

Comencemos…

Paso 1


Vamos al directorio de nuestro server local, en mi caso “C:/xampp/htdocs/” y crearemos una nueva carpeta a la que llamare “tutorial_geolocalizacion”, dentro de esta añadiremos otras 2 llamadas “css” y “js”.


Paso 2


Abriremos nuestro editor de código nos vamos a “Archivo > Nuevo” y escribimos en él una estructura html5.


Luego guardamos este nuevo archivo como “index.html” en la raíz de la carpeta “tutorial_geolocalizacion

Paso 3


Descargamos bootstrap desde su página oficial y copiamos el archivo “bootstrap.min.css” en nuestra carpeta css.


Paso 4


Volvemos a nuestro editor y añadimos la referencia a este archivo en nuestro “index.html”.


Paso 5


Crearemos un nuevo archivo y lo llamaremos “style.css” lo guardaremos en la carpeta css…


Paso 6


Añadiremos en el index.html las referencias al archivo css creado en el paso anterior. Además también incluiremos un script online el cual contiene la API en JavaScript de Google Maps.


Paso 7


Necesitaremos también crear un nuevo archivo .js donde escribiremos la función que hará la geolocalización y mostrara el mapa, lo guardaremos en la carpeta “js”, yo lo llamare “localiza.js”. También añadiré una referencia a él en el index.html



Ahora completaremos el maquetado de nuestro HTML, pueden ver el código en la siguiente imágen:


Paso 8


Ya que el <div class:”container”> será el marco principal y el <div id=”map-canvas”> contendrá el mapa entonces necesitaremos controlar el tamaño y características que tendrán, para esto escribiremos en nuestro archivo “style.css” el siguiente código.


Con esto le decimos al navegador que la capa #map-canvas tendrá un margen automático, una altura de 420pixceles, posición relativa y un ancho del 100% de la capa o div que lo contenga, en este caso esta se encuentra dentro de un div con la clase .container, al cual le estamos diciendo que ocupe el 90% de la pantalla del dispositivo y se muestre centrado horizontalmente.

Si lo vemos en nuestro navegador el resultado hasta ahora sería este…


Hasta ahora solo tenemos diseño pero nos falta lo más importante, el mapa, vamos a ello…

Paso 9


En el archivo “localiza.js” crearemos una nueva función que obtendrá las coordenadas del navegador del cliente y señalara en el mapa su ubicación aproximada, en caso de que la API no funcione correctamente en el cliente definiremos unas coordenadas por defecto y además incluiremos la posibilidad de que el cliente pueda arrastrar el marcador de posición hasta su ubicación real. Les explico paso a paso en el código, veamos…


Ya que tenemos nuestros archivos listos podemos hacer una prueba en nuestro servidor local y el resultado sería el siguiente.


Paso 10


Ahora haremos que nuestro mapa sea adaptable a dispositivos móviles, para lograr esto nos vamos nuevamente a nuestro archivo “style.css” y vamos a agregar unos nuevos selectores llamados media querys con ellos definiremos como se comportara nuestro diseño según el tamaño de pantalla donde se esté visualizando… Vamos a ello.


Ya tenemos todo lo necesario, ahora veamos los resultados emulando los dispositivos móviles, para esto podemos usar “google chrome”, teniendo nuestra aplicación abierta en el navegador hacemos clic derecho y nos vamos a “Inspeccionar elemento”.


Se abrirá una ventana como la siguiente y seleccionaremos en la parte inferior izquierda la herramienta con forma de teléfono móvil…




Verán que en la parte superior izquierda habrá un selector con la etiqueta “Device” si desplegamos donde dice “<select mode>” podremos ver una lista con los nombres de dispositivos móviles cuyo tamaños de pantalla son más comunes, si vamos seleccionando cada uno de ellos podremos ver como se comportara nuestro diseño en las pantallas de esos dispositivos, cualquier error que veamos podemos corregirlo con las media querys que hemos agregado en nuestro archivo “style.css”, para esto solo tendríamos que realizar los ajustes necesarios dentro de la media query que represente el tamaño de del dispositivo en el cual notamos el problema…

Veamos como se muestra nuestro diseño actual en algunos móviles…


api-google17.jpg


¿Te ayudó este Tutorial?


5 Comentarios


Miguel Guerrero
ago 25 2015 23:14
Esto es un tutorial súper completo e interesante. Me lo apunto a testear. Genial Ronny.

Ronny Bonillo
ago 26 2015 18:08

Que bueno que te sea de utilidad miguel... si necesitas alguna ayuda puedes dejarme tu comentario.

Este tutorial le ha encantado a un compi que está liado programando algo parecido. ;)


Ronny Bonillo
sep 10 2015 17:40

jajaja lo entiendo en su momento cuando un cliente me pidió algo como esto me causo muchos problemas porque en principio no me funcionaba hasta que luego de varias pruebas y una horas de lectura fue que pude dar con el problema, me alegra que le aya servido a tu amigo...


anibalthomas
mar 27 2017 23:12

ya hice todos los pasos, pero no me despliega el mapa =/

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X