Empezando con GoogleMaps 3

Jul 01 2011 Autor: J.P Aulet under API's,Geolocalización,Google,GoogleMaps,Internet,Programación

Mapas, iconos, geolocalización, eventos, API3…

Después de ver la ‘Introducción a la nueva API 3 de GoogleMaps‘ podemos empezar ha trastear y crear funcionalidades a nuestro mapa básico. Para esto, crearemos primero un archivo .HTML donde defiremos el aspecto de la página y incluiremos los códigos necesarios para empezar:

map.html
1 <html>
2 <head>
3 <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=true“></script>
4 <script type=”text/javascript” src=”http://tupagina.com/map_functions.js“></script>
5 </head>
6 <body onLoad=”inicialize();”>
7 <div id=”map“></div>
8 </body>
9 </html>

Éste es el código de una página HTML muy simple que mostrará nuestro mapa. Pero incluso en los ejemplos más básicos, debemos tener en cuenta algunas partes, estas resaltadas en negrita:

  1. Debemos incluir GoogleMaps en nuestra pàgina mediante su API. Esto se realiza con con JavaScript en la línea 3. El parámetro ‘sensor=true/false’ para indicar si esta aplicación utiliza un sensor para determinar la ubicación del usuario.
  2. Las funcionalidades de nuestro mapa, incluidos en un único archivo .js, línea 4 (se ha separado para facilitar la lectura).
  3. Iniciar las una función llamada ‘inicialize()’ al cargar la página. En nuestro caso esta función se encuentra especificada en ‘map_functions.js’
  4. Un contenedor para el mapa. En este caso llamado ‘map’, línea 7.

Con esto nos falta definir las funcionalidades de nuestro mapa, que guardaremos en el archivo ‘map_functions.js‘. Empezaremos por crear un mapa e insertarlo en nuestro contenedor ‘map‘:

map_function.js
1 function initialize() {
2 geocoder = new google.maps.Geocoder();
3 var latlng = new google.maps.LatLng(-35.397, 150.644);
4 var myOptions = {
5 zoom: 14,
6 center: latlng,
7 mapTypeId: google.maps.MapTypeId.ROADMAP,
8 mapTypeControl: false
9 };
10 map = new google.maps.Map(document.getElementById(“map”), myOptions);
11 }

En éste fichero se crea el objeto del mapa (línea 11) en el elemento con ‘id‘ especificado y las opciones definidas en la variable ‘myOptions’. En este caso hemos definido el zoom (1 és el menor zoom y 21 el máximo) a nivel de ciudad, centrado en la latitud y longitud especificada en la variable ‘latlng’. Esta variable se crea con un objeto LatLng, definiendo un punto en el mapa.

Además se puede definir el tipo de mapa y muchas otras opciones (consultar el tutorial oficial de Google):

  • RoadMap, capa que muestra las calles.
  • Satellite, capa que muestra imagen por satelite.
  • Hybrid, capa entre Roadmap y Satellite.
  • Terrain, capa que muestra un mapa físico.

Éste seria el resultado del código:

google maps 3 tutorial - 1

Ahora añadiremos funcionalidades extras a nuestro mapa. GoogleMaps permite añadir eventos en los objetos del mapa (por ejemplo, al pulsar sobre el mapa, sobre un icono del mapa, etc.). Vamos pues a añadir iconos al pulsar sobre el mapa añadiendo las siguientes líneas en nuestra función ‘inicialize()‘:

inicialize()
1 google.maps.event.addListener(map, “click”, function(event) {
2 marker = new google.maps.Marker({
3 position: event.latLng,
4 map: map
5 });
6 });

Con este codigo se crea una respuesta siempre que el evento ‘click‘ sea activado sobre el objeto ‘map‘. En este caso se crea un icono (marker) en el punto especificado por el click que recoge el código ‘event.latLng‘.

En este momento tenemos un mapa geoposicionado en un sitio estático, con un zoom establecido y con la posibilidad de crear iconos al pulsar sobre el mapa. Però seguramente querramos que cada usuario pueda ver su própio mapa dependiendo de donde se encuentren, es decir, geoposicionar el mapa segun la ubicación del usuario. Para hacer esto no hace falta que reinventamos la rueda, ya hay soluciones creadas. Primero comprobaremos si el navegador usado por el usuario soporta la geolocalización (empezando con el método estándard de W3C, sinó con GoogleGears). Si es así, necesitaremos la confirmación del usuario para compartir su ubicación con la aplicación (imagen inferior).

compartir ubicacion googlemaps 3

Mensaje de confirmación por parte del usuario para compartir la ubicacion googleMaps 3 en Firefox.

Si su navegador no lo soporta, lo mostraremos por pantalla avisando al usuario y lo dirigiremos a un sitio predefinido. Lo haremos con el siguiente código:

inicialize()
1 // Probar Geoposicionamiento
2 if(navigator.geolocation) {
3 browserSupportFlag = true;
4 navigator.geolocation.getCurrentPosition(function(position) {
5 initialLocation = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
6 map.setCenter(initialLocation);
7 }, function() {
8 handleNoGeolocation(browserSupportFlag);
9 });
10 // Try Google Gears Geolocation
11 } else if (google.gears) {
12 browserSupportFlag = true;
13 var geo = google.gears.factory.create(‘beta.geolocation’);
14 geo.getCurrentPosition(function(position) {
15 initialLocation = new google.maps.LatLng(position.latitude,position.longitude);
16 map.setCenter(initialLocation);
17

}, function() {
18 });
19 // Browser doesn’t support Geolocation
20 } else {
21 browserSupportFlag = false;
22 handleNoGeolocation(browserSupportFlag);
23 }
24
25 function handleNoGeolocation(errorFlag) {
26 if (errorFlag == true) {
27 alert(“Geolocation service failed.”);
28 initialLocation = newyork;
29 } else {
30 alert(“Your browser doesn’t support geolocation. We’ve placed you in Siberia.”);
31 initialLocation = siberia;
32 }
33 map.setCenter(initialLocation);
34 }}

Aún que el código sea largo, es senzillo de seguir. Primero probamos si el navegador soporta geoposicionamiento (línea 2), si es así extraemos la latitud y longitud con ‘getCurrentPosition‘ y centramos el mapa a ese punto con ‘setCenter‘. Sinó probamos con GoogleGears de la misma forma. Si ninguno de los dos es soportado, lanzamos la funcion ‘handleNOGeolocation()’ que se encargará de avisar al usuario y establecer el mapa dónde querramos. El resultado final es (el zoom se ha variado por motivos de privacidad):

geolocalizacion

Y hasta aquí todo, a partir de aquí podeis leer más documentación en la página oficial de Google.

En la siguiente entrega, crearemos las funciones necesarias para guardar los puntos definidos por los usuarios y cargarlos al iniciar. De esta forma, cada usuario dispondrá de un mapa geoposicionado en su ubicación actual y de sus iconos y los de otros usuarios. Para hacer esto, guardaremos cada punto en un archivo y cargamos todos los puntos del mapa al inicarlo. También mostraremos  como crear diferentes tipos de iconos para señalar diferentes tipos de puntos en el mapa (por ejemplo bares, restaurantes, hoteles…) y definir iconos para cada tipo distinto, entre otras más cosas.

Comments Off

Introducción a la API 3 de GoogleMaps

Abr 08 2011 Autor: J.P Aulet under API's,General,GoogleMaps

Con este senzillo ejemplo, podemos crear en nuestra pàgina web un mapa de GoogleMaps con la nueva versión de la API (version 3). Podemos ver la diferencia entre los dos tipos de mapa en la siguiente imagen:

google maps
La imagen de la izquierda corresponde a la API 2 y la derecha con API3. Nótese el cambio de la barra de zoom y navegación (más elegante en la version 3) y la aparición del ‘muñeco’ que permite canviar a StreetView en la nueva versión.

Para construir este mapa debemos seguir sólo 3 pasos:

Paso 1: Declaración de la nueva libreria de googleMaps:

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

Paso 2: Declaración del mapa y sus opciones dentro de un script ‘javascript‘ (antes de la etiqueta </header>):

<script type="text/javascript">
function initialize()
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP // Tipo de mapa (ROADMAP,SATELLITE,HYBRID,TERRAIN)
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
</script>

Paso 3: Emplazamos el mapa en la pàgina web y creamos la execución del codigo 2 al inicializar la pàgina:

<body onload="initialize()">
  <div id="map" style="width:100%; height:100%"></div>
</body>
</html>

Esto es todo.
Esperabas más? Con este senzillo codigo tendremos un mapa con la nueva versión de GoogleMaps en nuestra página. Lógicamente podemos añadir opciones, funciones y otros parámetros en el mapa, pero lo dejamos para otros artículos más especializados.

Comments Off