Segmentation Fault! » Api’s de Google http://www.segmentationfault.es La formulación de un problema es más importante que su solución. Tue, 29 Jun 2010 19:45:33 +0000 es hourly 1 http://wordpress.org/?v=3.2.1 Google Maps, creación de mapas – Parte II http://www.segmentationfault.es/2009/04/google-maps-parte-2/ http://www.segmentationfault.es/2009/04/google-maps-parte-2/#comments Sun, 26 Apr 2009 08:00:37 +0000 Christopher Vallés http://www.segmentationfault.es/?p=536 En esta nueva parte de creación de mapas vamos a incorporar a nuestro mapa la posibilidad de añadir marcadores al mapa y además cada marcador dispondrá de un globo de información extendida. Nos basaremos en el código resultante de la primera parte así que si no la has léido te recomiendo que lo hagas.

El sistema que vamos a implementar es estático así que tendremos que meter manualmente en el código las direcciones de los marcadores. Google nos ofrece en su API la clase GMarker que representa un marcador en el mapa, para posicionar el marcador debemos especificar las coordenadas en las que queremos que aparezca.
Para convertir una dirección a sus coordenadas tenemos la clase GClientGeocoder, esta clase tiene un método llamado getLatLng al que pasamos una dirección y una función que hará de callback y será dónde generemos el marcador.

Primero creamos el objeto GClientGeocoder

geocoder = new GClientGeocoder();

Ahora veremos el código que crea un marcador, lo asigna al mapa y añade un globo de información con la dirección:

var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(DIRECCIÓN);

Dónde DIRECCIÓN es la dirección que estamos geolocalizando. Ahora vamos a ver todo el código completo, evidentemente realizaremos algunos ajustes como introducir la dirección en una variable para trabajar con ella además introduciremos alguna que otra comprobación rutinaria.

El código quedaría así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Primeros pasos con Google Maps</title>

 <script src="http://maps.google.com/maps?file=api&v=2&key=TU-CLAVE-API" type="text/javascript">
 </script>

 <script type="text/javascript" charset="utf-8">
   function initialize() {
     var map = new GMap2(document.getElementById("map_canvas"));
     map.setCenter(new GLatLng(41.38, 2.18), 13);

     var address = "La Rambla, 08002, Barcelona";
     showAddress(address, map);
 }

 function showAddress(address, map) {
   geocoder = new GClientGeocoder();
     if (geocoder) {
       geocoder.getLatLng(address, function(point) {
       if (!point) {
         alert("No se ha podido geolocalizar la dirección" + address);
       } else {
         map.setCenter(point, 13);
         var marker = new GMarker(point);
         map.addOverlay(marker);
         marker.openInfoWindowHtml(address);
       }
     });
   }
 }
 </script>

</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

El resultado de este script lo podéis ver aquí.

Espero vuestras dudas/comentarios!

]]> http://www.segmentationfault.es/2009/04/google-maps-parte-2/feed/ 1 Google Maps, creación de mapas – Parte I http://www.segmentationfault.es/2009/04/creacion-mapas-parte-1/ http://www.segmentationfault.es/2009/04/creacion-mapas-parte-1/#comments Fri, 17 Apr 2009 08:00:55 +0000 Christopher Vallés http://www.segmentationfault.es/?p=217 Google Maps es la aplicación de mapas online por excelencia y gracias a la gente de Google tenemos toda la API disponible para usarla a nuestro antojo (o no) siempre y cuándo respetemos la política de uso.

En esta primera parte vamos a crear un script que simplemente mostrará un mapa centrado en la ciudad de Barcelona, podréis pensar que esto es demasiado sencillo pero esto será la base para las próximas entregas dónde la cosa se irá complicando cada vez más.

Antes de poder utilizar la API hay que iniciar sesión con alguna cuenta de google, después darse de alta en el servicio de API de Google Maps y especificar la url dónde se va a utilizar la API, en caso de que trabajéis en local deberéis poner algo como http://localhost. Una vez rellenado el formulario Google nos proporcionará una clave de API que es lo que nos va a identificar a la hora de realizar las llamadas.

Lo primero que hay que hacer para empezar a utilizar la API es incluirla en nuestro script especificando nuestra clave de la siguiente manera:


<script src="http://maps.google.com/maps?file=api&v=2&key=TU-CLAVE-API" type="text/javascript">
</script>

Una vez realizada la llamada a la API debemos incluir algún elemento dónde mostrar el mapa, en nuestro caso seguiremos las indicaciones de la documentación oficial y pondremos un div dónde aparecerá el mapa una vez lo carguemos.

<div id="map_canvas" style="width: 500px; height: 300px"></div>

Ahora ya tenemos todos los elementos básicos para visualizar el mapa y solo nos queda decirle a la API dónde tiene que presentar el contenido, para ello utilizaremos las clase Javascript GMaps2 que es la encargada de representar los mapas. Al crear una instancia de la clase GMaps2 es necesario especificar un nodo DOM como contenedor del mapa (en nuestro caso el elemento div) y lo obtendremos mediante el método document.getElementById().

var map = new GMap2(document.getElementById("map_canvas"));

Este trozo de código crear una variable map que representará nuestro mapa y asigna un objeto GMap2. La función GMap() es el constructor del objeto y como utilizamos Javascript los parámetros los podemos establecer luego ya que los tipos de datos son dinámicos.

Una vez realizado estos pasos solo nos queda inicializar el mapa, esto se hace mediante una llamada al método setCenter() pasandole obligatoriamente una coordenada GLatLng y un nivel de zoom (las coordenadas de Barcelona son 41.387885 y 2.169886). Este paso es obligatorio hacerlo antes de realizar cualquier operación sobre el mapa.

map.setCenter(new GLatLng(41.387885, 2.169886), 13);

Estos dos trozos de código hay que incluirlos en una función que llamaremos initialize() y que será invocada en el evento onload de la página.

function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41.387885, 2.169886), 13);
}

Para controlar la manera en que se carga el mapa y cuándo lo hace debemos incluir una llamada al método initialize() en el evento onload de la página y otra al método GUnload() en el evento onunload para evitar fallos de memoria.

<body onload="initialize()" onunload="GUnload()">

El código quedaría tal que así:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>Primeros pasos con Google Maps</title>

<script src="http://maps.google.com/maps?file=api&v=2&key=TU-CLAVE-API" type="text/javascript">
</script>

<script type="text/javascript" charset="utf-8">
function initialize() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(41.38, 2.18), 13);
}
</script>

</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

El resultado de este script lo podéis ver aquí

Si quieres continuar con este tutorial aquí tienes la parte dos

Espero vuestras dudas/comentarios!

]]> http://www.segmentationfault.es/2009/04/creacion-mapas-parte-1/feed/ 5