DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

Categorias
30-09-2013

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:

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.


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Árbol arcoíris creciente

Árbol arcoíris creciente

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Algunos artículos que te pueden interesar

¿Cómo crear un punto luminoso con JavaScript y Canvas?

¿Cómo crear un punto luminoso con JavaScript y Canvas?

Explicamos cómo crear un punto luminoso con HTML, JavaScript y Canvas.

Andrés Cruz 05-11-2015

Creando un archivo descargable con JavaScript

Creando un archivo descargable con JavaScript

En esta entrada veremos como generar un archivo a partir de un contenido de un campo de texto para su descarga en un archivo de texto plano.

Andrés Cruz 04-12-2014

La API de FullSreen en JavaScript

La API de FullSreen en JavaScript

La API de FullScreen permite presentar una página web o los distintos elementos que forman la misma en pantalla completa o FullScreen.

Andrés Cruz 23-03-2015