Scipion Strikes Back

Dibujar marcas en un mapa

11/03/2011 por Scipion

Trabajando con los markers

Puedes consultar las partes anteriores del manual de Google Maps Api 3

Para empezar vamos a trabajar con un vector de marcas que va a ser una variable global markers. Tan sencillo como:

var markers={};

setMarker hace algo más que posicionar un marker en el mapa. Seleciona el campo donde tenemos la localidad (o direccion), esto lo hace con la funcion dollar de jquery. Esta direccion la traduce a coordenadas LatLng con el servicio geocoder.
Despues invoca al método marker que es el que realmente inserta el marcador en el punto correcto del mapa.

function setMarker(id,addid){
  var dir = $("#"+id).val();
  geocoder.geocode( { 'address': dir}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      marker(id, results[0].geometry.location);
    } else {
      marker(id,null);
    }
  });
}

Marker en realidad es una funcion muy sencilla. Si existe el marcador añade una nueva posición, si no existe lo crea indicandole el mapa y la posicion donde irá.
La unica complejidad en cuanto a configuracion del maker es indicarle que no sea arrastrable (draggable) ni que se pueda pinchar (clickable).

function marker(id, location){
  if(markers[id]){
    markers[id].setPosition(location);
  }
  else{
    markers[id] = new google.maps.Marker({
      map: map
      ,position: location
      ,markerOptions:{
        draggable:false
        ,clickable:false
      }
    });
  }

  map.setZoom(10);
}

Otras opciones posibles son hacer zoom y centrar el mapa en el marcador (en este caso está comentado) pero son opciones del mapa, no del marcador.

Borrar un marker

Para borrar un marker es tan sencillo como añadirle una posicion nula. Como en nuestro caso tenemos un objeto global donde están todos nuestros markers nos podemos hacer las funciones hideMarker y hideAllMarkers:

function hideAllMarkers(){
  for(var m in markers){
    markers[m].setPosition(null);
  }
}

function hideMarker(id){
  if(id && id != "" && markers[id]){
    markers[id].setPosition(null);
    return true;
  }
  return false;
}

*Cuidado si se usan otras propiedades de los markers como el texto que despliegan al clickarlos. Si volvemos a ponerle una posicion al marker esas propiedaden persisten. Suponemos que en esta aplicacion no añadimos informacion extra y que los markers no son clickables. En otro caso para más seguridad hay que hacer un new cada vez para chafar las propiedades anteriores, o cambiarlas una por una.

Google Maps Geocoder

09/03/2011 por Scipion

De dirección a coordenada

Puedes consultar la primera parte del manual de Google Maps Api 3

El objeto Geocoder se usa para traducir coordenadas a direcciones y viceversa. Si nos fijamos en las indicaciones de uso de google nos encontramos que si usameos el servico Geocoder tenemos que incluir obligatoriamente un mapa de google en nuestra web.
Bueno en realidad es lo logico al traducir direcciones a coordenadas, pero si estabas pensando dar un servicio de otro tipo que no sea visualizado, siento decirte que te caparán el servicio

Este ejemplo traduce una dirección (de un input text) a unas coordenadas y centra el mapa en esas coordenadas y crea un marker.

<script type="text/javascript">
var geocoder;
var map;
function initialize() {
  geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

function codeAddress() {
  var address = document.getElementById("address").value;
  geocoder.geocode( { 'address': address}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      var marker = new google.maps.Marker({
        map: map,
        position: results[0].geometry.location
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}
</script>

más info: http://code.google.com/intl/es/apis/maps/documentation/javascript/services.html#Geocoding

una consulta correcta devuelve un json tal que así:

{
"status": "OK",
"results": [ {
  "types": [ "locality", "political" ],
  "formatted_address": "Winnetka, IL, USA",
  "address_components": [ {
  "long_name": "Winnetka",
  "short_name": "Winnetka",
  "types": [ "locality", "political" ]
  }, {
  "long_name": "Illinois",
  "short_name": "IL",
  "types": [ "administrative_area_level_1", "political" ]
  }, {
  "long_name": "United States",
  "short_name": "US",
  "types": [ "country", "political" ]
  } ],
"geometry": {
  "location": {
    "lat": 42.1083080,
    "lng": -87.7417070
  },
"location_type": "APPROXIMATE",
  "viewport": {
    "southwest": {
      "lat": 42.0917501,
      "lng": -87.7737218
    },
    "northeast": {
      "lat": 42.1248616,
      "lng": -87.7096922
    }
  },
  "bounds": {
    "southwest": {
      "lat": 42.0885320,
      "lng": -87.7715480
    },
    "northeast": {
      "lat": 42.1284090,
      "lng": -87.7110160
    }
  }
}
} ]
}

Accediendo al objeto results[0].geometry.location obtenemos un objeto lonLat, objeto propio de google.maps, que contiene la coordenada. ya podemos hacer lo que queramos con ella.

Introducción a Google Maps Api 3

05/03/2011 por Scipion

Google Maps api3 con ejemplos

Esta es la primera parte de un manual sobre el Api 3 de google maps. Simplemente es una primera guia para cómo, a partir de pocas lineas de código, poder implementar una aplicación interesante en tu web.

Aportar información geolocalizada está hoy a la orden del día, yo voy a basarme en los ejemplos que proporciona google añadiendo variaciones que amplian su funcionamiento. Para hacerlo de forma más comoda voy a utilizar jQuery 1.4.2 en algunos casos.

Ejemplo ligeramente modificado con jquery:
-muestra un mapa. se puede insertar longitud y latitud numerica y actualizar el mapa. Despues una lista de las propiedades de google.maps

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./jquery.1.4.2.js"></script>
<script type="text/javascript">
var myOptions, latlng, map;

function initialize() {
  latlng = new google.maps.LatLng(-34.397, 150.644);
  myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

$(document).ready(function(){
  $("#buttonver").click(function(){
    var latVar,lonVar;
    latVar = $("#lat").val();
    lonVar = $("#lon").val();
    latlng = new google.maps.LatLng(latVar, lonVar);
    myOptions.center=latlng;
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  });
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
<label for="lat">latitud</label><input type="text" id="lat" name="lat" value="38.5"/>
<label for="lon">longitud</label><input type="text" id="lon" name="lon" value="-0.5"/>
<input type="button" id="buttonver" value="ver" />

</body>
</html>

Añadimos evento cuando haga click para que muestre la longitud y latitud:
*MEJORA: no hacemos un new Map cuando cambiamos las coordenadas. Usamos el método map.setCenter(latlng)

<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="./jquery.1.4.2.js"></script>
<script type="text/javascript">
var myOptions, latlng, map;

function initialize() {
  latlng = new google.maps.LatLng(-34.397, 150.644);
  myOptions = {
    zoom: 8,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  google.maps.event.addListener(map, 'click', function(event) {
    alert(event.latLng);
  });
}

$(document).ready(function(){
  $("#buttonver").click(function(){
    var latVar,lonVar;
    latVar = $("#lat").val();
    lonVar = $("#lon").val();
    latlng = new google.maps.LatLng(latVar, lonVar);
    myOptions.center=latlng;
    map.setCenter(latlng);
  });
});
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:400px; height:400px"></div>
<label for="lat">latitud</label><input type="text" id="lat" name="lat" value="38.5"/>
<label for="lon">longitud</label><input type="text" id="lon" name="lon" value="-0.5"/>
<input type="button" id="buttonver" value="ver" />
</body>
</html>

Reseña sobre los eventos posibles:

– ‘click’
– ‘dblclick’
– ‘mouseup’ -> no me va
– ‘mousedown’ -> no me va
– ‘mouseover’
– ’mouseout’

En estos eventos se les pasa un event a la funcion calback que contiene una variable latLng.

– ‘zoom_change’ -> el callback no recibe parámetros
– ‘bounds_changed’
– ‘center_changed’

Enlaces de referencia:

-Tutorial:
http://code.google.com/intl/es/apis/maps/documentation/javascript/tutorial.html

-Referencia:
http://code.google.com/intl/es/apis/maps/documentation/javascript/reference.html

-Ejemplos:
http://code.google.com/intl/es/apis/maps/documentation/javascript/examples/

mozilla t-shirt

26/02/2011 por Scipion

Hace un tiempo me encontre este post:

llamamiento: http://hacks.mozilla.org/2011/01/write-some-docs-get-an-mdn-t-shirt/

La gente de mozilla iba a hacer un sprint de generar documentación en developer.mozilla.org y buscaban colaboradores. Explicaban que si querias colaborar te podias meter en el canal de chat de irc de desarrolladores (que es #mozdev) y que si colaborabas te podias ganar una camiseta de mozilla.

Pues bien, esa documentación que tanto me ha dado y tan poco le he dado yo. La verdad es que la mayoría está en ingles. Yo tampoco es que conozca el código fuente de firefox como la palma de mi mano, pero si que acostumbro a leer la documentación de distintos sitios para aprender, tanto en ingles como en español, y el wiki de la documentación de mozilla es uno de mis sitios de referencia importantes.

Pues bien, el citado día del sprint me presencié en el canal de chat. Allí me preguntaron que si estaba por el sprint doc day y contesté que sí. «¿En que apartado te gustaría trabajar Scipion?» – me preguntó Janet Swisher, que trabaja en la documentación de mozilla y era una de las coordinadoras del spint. – «En la traducción al español». – le contesté – «Excelente, tenemos personas trabajando en la traducción al francés y al portugués pero nadie trabajando en español. Enviame tus datos para que te mandemos una camisera».

Ese día traduje unos cuantos artículos y revisé algún otro, pero queda muchísimo que hacer en la parte hispana de la documentación.

… y los chicos de mozilla me mandaron la camiseta.

No he dejado de contribuir el tiempo que puedo en la docu de mozilla y seguiré cuando tenga un rato, porque muchas cosas que no son novedosas siguen estando solo en inglés.

Por lo visto fue bastante bien la cosa según explican. Normalmente la comunidad produce documentación a un ritmo bastante lento. La comunidad hispana no es una excepción, es más, somos de los que más lentos vamos. Por eso os animo a subiros al carro. Estad pendientes del próximo sprint y ¡¡¡Ganad una camiseta!!!