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.