wiki:simpleGeoPosicion

Geoposición (punto a punto)

Para mostrar puntos geoposicionados en una página primero tenemos que añadir todo el código Javascript necesario para mostrarlo. Esto se realiza añadiendo el siguiente tag a la página: 

<!--$ FUNCION geoposSimpleCode ( "ES" ) $-->

"ES" se utiliza para indicar que todo está en castellano (Botones, nombres de ciudades, búsquedas, ...)

Los puntos se mostrarán en un mapa, y para ellos deberemos crear un "DIV" en la página con las medidas que consideremos. Este div tiene que tener un ID único. Ejemplo: 

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

Antes de poder mostrar ningún punto en el mapa tenemos que instanciarlo mediante el siguiente tag: 

<!--$ FUNCION instanceSimpleMap ( instanceName, divId, zoomLevel, Lat, Lon, autoPosition ) $-->

Los parámetros que recibe son los siguientes:

  • instanceName: (string) nombre de la instancia.
  • divId: (string) El el div que mostrará el mapa
  • zoomLevel: (entero) nivel de zoom que queremos mostrar en el mapa (1 .. 12). Este parámetro es opcional, en caso de no ser necesario se deja a "".
  • Lat: (real) latitud del centro del mapa. Este parámetro es opcional, en caso de no ser necesario se deja a "".
  • Lon: (real) Longitud del centro del mapa. Este parámetro es opcional, en caso de no ser necesario se deja a "".
  • autoPosition: (0 | 1) indica si el mapa va a tratar de centrars basándose e en la posición del usuario (html5). Este parámetro es opcional, en caso de no ser necesario se deja a "".

Para mostrar puntos en el mapa podemos hacerlo mediante el siguiente tag: 

<!--$ FUNCION showPoint ( instanceName, point, html, icon ) $-->

Los parámetros que recibe son los siguientes:

  • instanceMap: (string) es el nombre de la instancia
  • point: es un campo de tipo "geopoint"
  • html: (string) es el html que queremos mostrar cuando pulsemos en el punto. Si no queremos que muestre nada lo dejamos a ""
  • icon: (string) es el icono que queremos que se muestre. Tiene que ser la URL a un icono o dejarlo a "" para que muestre un icono por defecto.

Ejemplo completo un punto: 

<!DOCTYPE html>
<html>
<head>
<!--$ FUNCION geoposSimpleCode ( "ES" ) $-->
</head>
<body>
  <div id="map_canvas" style="height: 300px; width: 500px;"></div>
</body>
<!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "5", "40.41", "-3.6", "0" ) $-->
<!--$ FUNCION showPoint ( "mapa1", sede.direccion, "<b>Ejemplo</b>", "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png" ) $-->
</html>

Ejemplo completo varios puntos: 

<!DOCTYPE html>
<html>
<head>
<!--$ FUNCION geoposSimpleCode ( "ES" ) $-->
</head>
<body>
  <div id="map_canvas" style="height: 300px; width: 500px;"></div>
</body>
<!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "5", "40.41", "-3.6", "0" ) $-->
<!--$ BUCLE sede $-->
  <!--$ FUNCION showPoint ( "mapa1", sede.direccion, sede.direccion.calle, "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png" ) $-->
<!--$ FIN_BUCLE $-->
</html>
Last modified 13 years ago Last modified on Jan 17, 2012, 9:11:56 AM