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

Partículas con Canvas en JavaScript

Partículas con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Creando un péndulo con Canvas en JavaScript

Unión de galaxias con JavaScript

Unión de galaxias con JavaScript

Algunos artículos que te pueden interesar

¿Cómo obtener imágenes en Escala de Grises con solo HTML5?

¿Cómo obtener imágenes en Escala de Grises con solo HTML5?

En esta nueva entrega veremos cómo obtener imágenes en Escala de Grises o en Blanco y Negro con HTML5.

Andrés Cruz 10-07-2014

Primeros pasos con la APi de Soundcloud con JavaScript

Primeros pasos con la APi de Soundcloud con JavaScript

Se explica como emplear la API de Soundcloud para crear widget de canciones en nuestra página web controlar los widgets en base a eventos.

Andrés Cruz 27-04-2017

Usando la API de Visibilidad de Página  en JavaScript

Usando la API de Visibilidad de Página en JavaScript

La API de Visibilidad de Página permite saber cuando una página web está siendo visualizada por el usuario y por ende podemos realizar las configuraciones para evitar el uso de recursos innecesarios.

Andrés Cruz 09-03-2015