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

Burbujas flotantes con JavaScript

Burbujas flotantes con JavaScript

Eye Candy

Eye Candy

Esfera de agrupación

Esfera de agrupación

Algunos artículos que te pueden interesar

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

Primeros pasos con las Cookies en JavaScript

Primeros pasos con las Cookies en JavaScript

JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.

Andrés Cruz 17-12-2015

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

¿Cómo hacer una sencilla galería con CSS y 6 líneas de JavaScript?

En esta entrada explicaremos como crear una sencilla galería empleando CSS y seis (6) líneas de JavaScript.

Andrés Cruz 12-02-2015