Artículos sobre la api de Google Maps http://www.mappas.org/blog El mundo de las APIS de Google Maps Sat, 05 Apr 2008 16:28:15 +0000 http://wordpress.org/?v=2.5 en Como introducir Pitch y Yaw a nuestro mapa de Gmaps Streets http://www.mappas.org/blog/como-introducir-picth-y-yaw-a-nuestro-mapa-de-gmaps-streets/ http://www.mappas.org/blog/como-introducir-picth-y-yaw-a-nuestro-mapa-de-gmaps-streets/#comments Fri, 04 Apr 2008 09:55:12 +0000 admin http://www.mappas.org/blog/?p=4 Bueno vamos avanzando en esto de los “panoramas de google maps”. Hay dos conceptos nuevos: pitch y yaw.

Yaw: ángulo con respecto a la vertical. Osea que sus valores van del 0 al 360.

Pith: ángulo con respecto a la horizontal: Sus valores creo que van, dependiendo del panorama que se muestre, desde el -90 hasta el 90.

Vamos a ver dos ejemplo variando los pitch y los yaw:
Primero este:

<!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” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example: Streetview Object Example</title>
<script src=”http://maps.google.com/maps?file=api&v=2.x&key=tuapikey”
type=”text/javascript”></script>
<script type=”text/javascript”>
function initialize() {
var myPano = new GStreetviewPanorama(document.getElementById(”pano”));
fenwayPark = new GLatLng(42.345573,-71.098326);
myPOV = {yaw:370.64659986187695,pitch:-20};
myPano.setLocationAndPOV(fenwayPark, myPOV);
GEvent.addListener(myPano, “error”, handleNoFlash);
}
function handleNoFlash(errorCode) {
if (errorCode == 603) {
alert(”Error: Flash doesn’t appear to be supported by your browser”);
return;
}
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div name=”pano” id=”pano” style=”width: 500px; height: 300px”></div>
</body>
</html>

Vemos que “myPOV” (supongo que será: mi Punto de Vista) está con valores: yaw:370.6464999… y pitch:-2. Esta conbinación produce este panorama:

cargando panorama

Sin embargo si cambiamos yaw a 90 y picth a 20 obtendremos este otro panorama:

cargando panorama

También se puede cambiar el nivel de zoom, lo valores van de 0 a 2, para ello en la línea:

myPOV = {yaw:90,pitch:20}

hay que añadir el valor del zoom:

myPOV = {yaw:90,pitch:20, zoom:2}

y obtendremos al algo como esto:

cargando panorama

Hay que tener ojo con el zoom ya que hay panoramas que admite más zoom que otros pero por regla general si vamos del 0 al 2 no tendremos problemas.

]]> http://www.mappas.org/blog/como-introducir-picth-y-yaw-a-nuestro-mapa-de-gmaps-streets/feed/ Api Google Maps Streets, por fin salió http://www.mappas.org/blog/api-google-maps-streets-por-fin-salio/ http://www.mappas.org/blog/api-google-maps-streets-por-fin-salio/#comments Fri, 04 Apr 2008 09:31:37 +0000 admin http://www.mappas.org/blog/?p=3 Desde que ví por primera vez Google Maps Streets rápidamente me lancé a investigar la api de Google Maps para ver cómo podía implementear esta auténtica maravilla. Lógicamente me llevé una gra decepción ya que no aparecía por ningún lado. Pues bien, creo que el pasado 11 de Marzo de 2008 la api de google maps streets fue publicada.

Me puse a analizar y rápidamente me di cuenta de que no era tan compleja como me había imaginado, además de latitud, longitud y zoom, como en los anteriores mapas incorpora dos parámetros nuevos: Picth y yaw, simplemente son el angulos sobre la vertical y el ángulo sobre la vertical, tan simple como eso.

Un ejemplo:

cargando mapa

Aquí tenemos un ejemplo de la potencia de esta herramienta.

Es tan fácil como implementar el siguiente código:

<!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” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>
<title>Google Maps JavaScript API Example: Simple Streetview Example</title>
<script src=”http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=elapikeyparatusitioweb”
type=”text/javascript”></script>
<script type=”text/javascript”>

var myPano;

function initialize() {
var fenwayPark = new GLatLng(42.345573,-71.098326);
panoramaOptions = { latlng:fenwayPark };
myPano = new GStreetviewPanorama(document.getElementById(”pano”), panoramaOptions);
GEvent.addListener(myPano, “error”, handleNoFlash);
}

function handleNoFlash(errorCode) {
if (errorCode == FLASH_UNAVAILABLE) {
alert(”Error: Flash doesn’t appear to be supported by your browser”);
return;
}
}
</script>
</head>
<body onload=”initialize()” onunload=”GUnload()”>
<div name=”pano” id=”pano” style=”width: 500px; height: 300px”></div>
</body>
</html>

Podemos analizar los siguiente:

1: var fenwayPark = new GLatLng(42.345573,-71.098326);
La variable fenwayPark tiene las coordenadas de latitud y longitud del centro del panorama

2: panoramaOptions = { latlng:fenwayPark }
Aquí introducimos en panoramaOptions los datos anteriores

3: myPano = new GStreetviewPanorama(document.getElementById(”pano”), panoramaOptions);
Este es un paso importante, en myPano introducimos el Objeto “GStreetviewPanorama” con sus opciones.

Simplemente con esto ya tenemos nuestro panorama listo.

]]> http://www.mappas.org/blog/api-google-maps-streets-por-fin-salio/feed/ Google Maps en imágenes fijas. Mapas estáticos http://www.mappas.org/blog/google-maps-en-imagenes-fijas-mapas-estaticos/ http://www.mappas.org/blog/google-maps-en-imagenes-fijas-mapas-estaticos/#comments Mon, 31 Mar 2008 10:43:22 +0000 admin http://www.mappas.org/blog/?p=5 Pues si, los de Google no paran de pensar. Y la verdad es que piensan muy bien. Los que nos dedicamos a esto de programar sobre Google Maps hacía tiempo que buscábamos algo como esto desde hace tiempo.

Cuando tienes que mostrar un volumen de datos grandes sobre google maps o tienes que mostrar varios mapas de gmaps la verdad es que se necesita muchísima memoria. A mi con un mac y firefox muchas veces me tarda demasiado la carga de las páginas con varios mapas. También la imposibilidad de que los dispositivo móviles ejecuten el Google Maps de toda la vida (si ya se que existe la versión de gmaps para móviles) limitaba mucho ciertos desarrollos.

Bueno pues ya tenemos solución, mirad esto:
Imagen de google maps

Una aténtica maravilla, además es facilísimo de utilizar:

Solo tienes que llamar a esta imágen desde el atributo src de la etiqueta

src=http://maps.google.com/staticmap?
center=41.4087,2.18688
&zoom=14
&size=400×400
&maptype=mobile\
&markers=41.4087,2.18688,blue
&key=laapikeydetusitio”

Aquí nos encontramos varios parámetros:
center: tienes que poner las coordenadas del centro del mapa
zoom: nivel de zoom
size: tamaño del mapa que quieres mostrar
maptype: tipo de mapa (mapa,hidrido,satlélite…)
makers: coordenadas de las marcas y color
key: el apikey para tu sitio web

Fácil de implementar y super útil. Otro 10 para google.

Aquí tenéis toda la información sobre la api de los mapas estáticos de google maps

]]> http://www.mappas.org/blog/google-maps-en-imagenes-fijas-mapas-estaticos/feed/ Localizar direcciones con Google Maps http://www.mappas.org/blog/localizar-direcciones-con-google-maps/ http://www.mappas.org/blog/localizar-direcciones-con-google-maps/#comments Thu, 20 Mar 2008 08:31:06 +0000 admin http://www.mappas.org/blog/?p=7 Desde los inicios de los callejeros en internet siempre me llamó la atención la posibilidad de realizar alguno, incluso hice mis pinitos allá por el 2000 cuando desarrollaba lo que podría ser un Google Local primitivo. Eran esfuerzos titánicos que a la larga no funcionaban. Sin embargo hoy en día tener nuestro propio callejero de casi todo el mundo (sobre todo Norteamérica, Europa y Japón) es tarea sencilla con Google Maps.

Vamos a ver cómo podemos hacer esto:
Google Maps dispone del objeto: GClientGeocoder con el cual podemos localizar direcciones.

Aquí tenemos un ejemplo práctico:

<!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” xmlns:v=”urn:schemas-microsoft-com:vml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/>
<title>Google Maps API Example: Simple Geocoding</title>
<script src=”http://maps.google.com/maps?file=api&v=2.x&key=miapikey” type=”text/javascript”></script>
<script type=”text/javascript”>

var map = null;
var geocoder = null;

function initialize() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(”map_canvas”));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
geocoder = new GClientGeocoder();
}
}

function showAddress(address) {
if (geocoder) {
geocoder.getLatLng(
address,
function(point) {
if (!point) {
alert(address + ” not found”);
} else {
map.setCenter(point, 13);
var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(address);
}
}
);
}
}
</script>
</head>

<body onload=”initialize()” onunload=”GUnload()”>
<form action=”#” onsubmit=”showAddress(this.address.value); return false”>
<p>
<input type=”text” size=”60″ name=”address” value=”1600 Amphitheatre Pky, Mountain View, CA” />
<input type=”submit” value=”Go!” />
</p>
<div id=”map_canvas” style=”width: 500px; height: 300px”></div>
</form>
</body>
</html>

Si nos fijamos en el código vemos como en la función initialize(), si el navegador es compatible con Google Maps, creamos un mapa simple y justo debajo está el objeto “geocoder” que es el que nos va a mostrar las coordenadas de las direcciones.

Un poco más abajo vemos la función showAddress(address) a la cual le vamos a introducir la dirección que buscamos mediante la variable “address”. Esta función ella solita si el objeto geocoder conoce la dirección nos va ha poner el centro del mapa en la dirección correcta, va a poner una marca y un “bocadillo” de información. Si no conoce la dirección nos mostrará una alerta.

Veamos este objeto en funcionamiento:

]]> http://www.mappas.org/blog/localizar-direcciones-con-google-maps/feed/ Cómo sacar información de Google Maps http://www.mappas.org/blog/como-sacar-informacion-de-google-maps/ http://www.mappas.org/blog/como-sacar-informacion-de-google-maps/#comments Tue, 04 Mar 2008 11:10:44 +0000 admin http://www.mappas.org/blog/?p=6 Hay veces que nos es necesario saber dónde nos encontramos cuando mostramos un mapa de Google. Para ello existen 3 parámetros principales y básicos, que son la latitud, la longitud y el zoom.

Pues bien, Google Maps nos brinda esta información son problemas. Para ello vamos a utilizar en nuestro sitio un formulario como este:

<form name=”form1″ action=”#”>
Lat: <input name=”latitud” type=”text” value=”0″ />
Long: <input name=”longitud” type=”text” value=”0″ />
Zoom: <input name=”zoom” type=”text” value=”0″ />
</form>

Perfecto ya tenemos nuestro formulario donde mostrarmos la información del mapa.

Ahora vamos con el mapa en sí, lo típico es tener algo como esto:

if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(”mapa”));
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());
map.addControl(new GLargeMapControl());
map.addControl(new GOverviewMapControl());
map.setCenter(new GLatLng(0, 0), 1,G_SATELLITE_MAP);
geocoder = new GClientGeocoder();
mostrarcentro();
GEvent.addListener(map, “move”, function() {mostrarcentro();});
}

Tenéis que ver que hemos puesto un “escuchador” de eventos, osea que cada vez que el mapa haga el evento “move”, osea que se mueva, llame a la función mostrarcentro().

La clave de todo está en la función “mostrarcentro()” que a continuación os escribo:

function mostrarcentro()
{
var centro = map.getCenter();
document.form1.latitud.value=centro.lat();
document.form1.longitud.value=centro.lng();
document.form1.zoom.value=map.getZoom();
}

Con esta función lo primero que recogemos en la variable “centro” son los datos que el mapa nos devuelve con getCenter(). En esta variable tengo la latitud, longitud, que sacamos con centro.lat() y centro.lng(). Luego para el zoom lo sacamos con getZoom()

Así tendremos la información del mapa cada vez que se mueva.


Lat:
Long:
Zoom:

cargando mapa

]]> http://www.mappas.org/blog/como-sacar-informacion-de-google-maps/feed/