Geolocalización con JavaScript y Google Maps

30-09-2013 - Andrés Cruz

Geolocalización con JavaScript y Google Maps In english

Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos.

Google Maps es una excelente herramienta para visualizar mapas desplazables e inclusos rutas entre distintos puntos; esta excelente herramienta esta disponible para utilizar en nuestro proyectos web, en esta entrada veremos como utilizar Google Maps en nuestros proyectos web:

1

Obtener la ubicación del usuario, tema ya explicado en el artículo pasado Geolocalización con JavaScript:

myLatlng = {
	Lat: position.coords.latitude,
	Lng: position.coords.longitude
}

2

Incluimos un enlace al API de Google Maps en nuestro documento HTML para poder utilizarla:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

3

Luego incluimos el lienzo (canvas) en donde se dibujara el mapa:

<div id="map_canvas" style="width:500px; height:500px"></div>

Nótese que el mapa puede ser de distintos tamaños; para efectos de este ejemplo será de 500px X 500px.

4

El penúltimo paso consiste en construir el objeto utilizado para la manipulación de las opciones del mapa:

var mapOptions = {
  zoom: 8,
  center: new google.maps.LatLng(myLatlng.Lat, myLatlng.Lng),
  mapTypeId: google.maps.MapTypeId.ROADMAP
};

Tipos de mapas que se encuentran disponibles en el API de Google Maps:

  • MapTypeId.ROADMAP muestra la vista de mapa de carretera predeterminada.
  • MapTypeId.SATELLITE muestra imágenes de satélite de Google Earth.
  • MapTypeId.HYBRID muestra una mezcla de vistas normales y de satélite.
  • MapTypeId.TERRAIN muestra un mapa físico basado en información del relieve.

Los niveles de zoom posibles oscilan entre 0 y 21 para el más lejano.

5

El último paso consiste en construir el mapa:

var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

Construyendo nuestro mapa básico

1+2+3+4+5

Ahora veamos todos los pasos en conjunto:

 

Conclusión

Aquí podemos ver un ampliación de nuestro artículo pasado: Geolocalización con JavaScript utilizando las mismas bases explicadas; pero esta vez utilizando la API de Google Maps para mostrar la ubicación del usuario.


Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

Conozca nuestros cursos sobre Laravel, CodeIgniter, Flutter, Electron, Django, Flask y muchos más!

Ver los cursos
¡Hazte afiliado en Gumroad!

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
!Web Alojada en Hostinger!