| 1 | = Geoposición (punto a punto) = |
| 2 | |
| 3 | 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: |
| 4 | |
| 5 | {{{ |
| 6 | <!--$ FUNCION geoposSimpleCode ( "ES" ) $--> |
| 7 | }}} |
| 8 | |
| 9 | "ES" se utiliza para indicar que todo está en castellano (Botones, nombres de ciudades, búsquedas, ...) |
| 10 | |
| 11 | 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: |
| 12 | |
| 13 | {{{ |
| 14 | <div id="map_canvas" style="height: 300px; width: 500px;"></div> |
| 15 | }}} |
| 16 | |
| 17 | Antes de poder mostrar ningún punto en el mapa tenemos que instanciarlo mediante el siguiente tag: |
| 18 | |
| 19 | {{{ |
| 20 | <!--$ FUNCION instanceSimpleMap ( instanceName, divId, zoomLevel, Lat, Lon, autoPosition ) $--> |
| 21 | }}} |
| 22 | |
| 23 | Los parámetros que recibe son los siguientes: |
| 24 | |
| 25 | * instanceName: (string) nombre de la instancia. |
| 26 | * divId: (string) El el div que mostrará el mapa |
| 27 | * 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 "". |
| 28 | * Lat: (real) latitud del centro del mapa. Este parámetro es opcional, en caso de no ser necesario se deja a "". |
| 29 | * Lon: (real) Longitud del centro del mapa. Este parámetro es opcional, en caso de no ser necesario se deja a "". |
| 30 | * 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 "". |
| 31 | |
| 32 | Para mostrar puntos en el mapa podemos hacerlo mediante el siguiente tag: |
| 33 | |
| 34 | {{{ |
| 35 | <!--$ FUNCION showPoint ( instanceName, point, html, icon ) $--> |
| 36 | }}} |
| 37 | |
| 38 | Los parámetros que recibe son los siguientes: |
| 39 | |
| 40 | * instanceMap: (string) es el nombre de la instancia |
| 41 | * point: es un campo de tipo "geopoint" |
| 42 | * html: (string) es el html que queremos mostrar cuando pulsemos en el punto. Si no queremos que muestre nada lo dejamos a "" |
| 43 | * 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. |
| 44 | |
| 45 | Ejemplo completo un punto: |
| 46 | |
| 47 | {{{ |
| 48 | <!DOCTYPE html> |
| 49 | <html> |
| 50 | <head> |
| 51 | <!--$ FUNCION geoposSimpleCode ( "ES" ) $--> |
| 52 | </head> |
| 53 | <body> |
| 54 | <div id="map_canvas" style="height: 300px; width: 500px;"></div> |
| 55 | </body> |
| 56 | <!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "5", "40.41", "-3.6", "0" ) $--> |
| 57 | <!--$ FUNCION showPoint ( "mapa1", sede.direccion, "<b>Ejemplo</b>", "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png" ) $--> |
| 58 | </html> |
| 59 | }}} |
| 60 | |
| 61 | |
| 62 | Ejemplo completo varios puntos: |
| 63 | |
| 64 | {{{ |
| 65 | <!DOCTYPE html> |
| 66 | <html> |
| 67 | <head> |
| 68 | <!--$ FUNCION geoposSimpleCode ( "ES" ) $--> |
| 69 | </head> |
| 70 | <body> |
| 71 | <div id="map_canvas" style="height: 300px; width: 500px;"></div> |
| 72 | </body> |
| 73 | <!--$ FUNCION instanceSimpleMap ("mapa1", "map_canvas", "5", "40.41", "-3.6", "0" ) $--> |
| 74 | <!--$ BUCLE sede $--> |
| 75 | <!--$ FUNCION showPoint ( "mapa1", sede.direccion, sede.direccion.calle, "http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png" ) $--> |
| 76 | <!--$ FIN_BUCLE $--> |
| 77 | </html> |
| 78 | }}} |