| | 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 | }}} |