Añadir jQuery UI al proyecto web

jQuery UI es una librería muy conocida y útil que nos permite añadir de una forma muy sencilla elementos dinámicos a nuestro interface de usuario (la página web).

jQuery UI nos permitirá añadir cuadros de diálogo, selectores, desplegables, botones, animaciones, etc.

Lo único que debemos hacer es añadir la librería javascript

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css" />

y la hoja de estilo

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>

en la cabecera de nuestra página web.

Para poder usar esta librería también debemos añadir la librería jQuery a nuestra página web.

La forma más sencilla de encontrar las últimas versiones de estas librerías y hojas de estilo es visitando el blog de jQuery UI.
Allí podremos encontrar enlaces al CDN de Google, al CDN de Microsoft o descargar las últimas versiones de la librería y de las hojas de estilo (hay varias, una para cada combinación de colores).

Muy sencillo.

Personalizar la página de error con el widget de Google

Google proporciona un widget de busqueda especial que podemos usar en nuestras páginas personalizadas de error para ofrecer a nuestros usuarios la oportunidad de buscar la página en la que realmente están interesados.

Lo único que hay que hacer es añadir el código a nuestra página de error personalizada:

<script type="text/javascript">
  var GOOG_FIXURL_LANG = 'es';
  var GOOG_FIXURL_SITE = 'http://nioos.com'
</script>
<script type="text/javascript"
  src="http://linkhelp.clients.google.com/tbproxy/lh/wm/fixurl.js">
</script>

Donde "GOOG_FIXURL_LANG" es el idioma en el que aparecerá diálogo de búsqueda de Google y "GOOG_FIXURL_SITE" es la dirección de nuestro sitio web.

Fácil, ¿verdad?

Automatizar las fechas del archivo sitemap.xml con maven

Es posible automatizar la fechas del archivo sitemap.xml usando maven.

Para esto debemos crear una nueva carpeta de recursos web (por ejemplo "src/main/webresources") donde dejaremos una versión modificada de nuestro fichero sitemap.xml.

Este fichero sitemap.xml ya no contendra las fechas explícitamente, sino que tendrá la variable ${timestamp}:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <url>
        <loc>http://nioos.com</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
    <url>
        <loc>http://nioos.com/login.html</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
    <url>
        <loc>http://nioos.com/sitemap.html</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
    <url>
        <loc>http://nioos.com/politica-privacidad.html</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
    <url>
        <loc>http://nioos.com/condiciones-servicio.html</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
    <url>
        <loc>http://nioos.com/politica-contenido.html</loc>
        <lastmod>${timestamp}</lastmod>
    </url>
</urlset>

La variable ${timestamp} la definiremos en el fichero de configuración de nuestro de maven, al igual que nuestra nueva carpeta de recursos:

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  <groupId>ui.nioos.com</groupId>
  <artifactId>NioosUI</artifactId>
  <version>0.0.1-SNAPSHOT</version>
  <packaging>war</packaging>
  <name>NioosUI Webapp</name>
  <url>http://www.nioos.com</url>
  <!--  -->
  <properties>
      <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
      <timestamp>${maven.build.timestamp}</timestamp>
      <maven.build.timestamp.format>yyyy-MM-dd</maven.build.timestamp.format>
  </properties>
  <!--  -->
  <build>
    <finalName>NioosUI</finalName>
    <!--  -->
    <plugins>
        <plugin>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.2</version>
            <configuration>
                <webResources>
                    <resource>
                        <filtering>true</filtering>
                        <directory>src/main/webresources</directory>
                    </resource>
                </webResources>
            </configuration>
        </plugin>
    </plugins>
    <!--  -->
  </build>
  <dependencies>
      <dependency>
          <groupId>net.sf.ehcache</groupId>
          <artifactId>ehcache-web</artifactId>
          <version>2.0.4</version>
          <scope>runtime</scope>
      </dependency>
  </dependencies>
</project>

Aquí hemos definido las propiedades:

<properties>
  <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
  <timestamp>${maven.build.timestamp}</timestamp>
  <maven.build.timestamp.format>yyyy-MM-dd</maven.build.timestamp.format></properties>

que posteriormente serán usadas en el nuevo fichero sitemap.xml, y también hemos configurado el plugin war de maven para que actualize los ficheros de la nueva carpeta con la fecha de la última compilación:

<plugins>
  <plugin>
    <artifactId>maven-war-plugin</artifactId>
    <version>2.2</version>
    <configuration>
      <webResources>
        <resource>
          <filtering>true</filtering>
          <directory>src/main/webresources</directory>
        </resource>
      </webResources>
    </configuration>  </plugin>
</plugins>

De esta forma cada vez que compilemos el proyecto web usando maven el fichero sitemap.xml estará actualizado con la fecha de la última compilación de nuestro proyecto y los buscadores podrán actualizar sus índices de búsqueda de una forma más sencilla.

El archivo sitemap.xml

A veces es recomendable crear un archivo sitemap.xml para nuestro sitio web para que los motores de búsqueda tengan más sencillo indexar nuestras páginas web.

Este archivo se debe dejar en el directorio raiz de nuestro sitio web.

Su formato es muy sencillo, se encuentra definido en http://www.sitemaps.org/, y básicamente es la lista de las páginas web de nuestro sitio web junto con la fecha de su última modificación.
Así los motores de búsqueda sabran cuando han cambiado nuestras páginas y volverán a indexarlas.

Crear este fichero no requiere mucho trabajo.

El archivo robots.txt

Si nuestro sitio web contiene páginas antiguas, o directorios que contienen imagenes sin importancia, o por cualquier razón queremos avisar a Google o cualquier otro buscador que no estamos interesados en que indexe ciertas páginas ó directorios de nuestro sitio web debemos usar un archivo robots.txt

Este archivo se debe dejar en el directorio raíz de nuestro sitio web.

La sintaxis concreta de este archivo es muy sencilla y se puede encontrar en http://www.robotstxt.org/

Añadir analítica web a nuestros sitios web con Google Analytics

Podemos añadir analítica web a nuestra web con Google Analytics de una forma muy simple.

Sólo debemos abrir una cuenta en Google Analytics y poner el código javascript que se nos proporciona justo antes de cerrar la cabecera (header) ó el cuerpo (body) de nuestras páginas web.

A partir de entonces tendremos disponibles todo tipo de estadísticas sobre las visitas a nuestros sitios web.

Así podremos conocer gran cantidad de información sobre las visitas a nuestros sitios web de una forma muy sencilla.

Poner un icono de favoritos en nuestra página web

Poner un icono de favoritos en nuestra página web (esas pequeñas imágenes que aparecen al lado de la barra de direcciones y en cada pestaña del navegador que tenemos abierta, y que son usadas también en los marcadores de favoritos de las páginas web) es muy simple, sólo hay que añadir:

<link rel="shortcut icon" href="favicon.ico" />

a la cabecera de nuestra página web.

El archivo favicon.ico es una imagen de tipo .ico que debe tener un tamaño de 16x16 pixels.

Esta imagen se puede crear con un editor gráfico (como GIMP, por ejemplo) o usando un servicio online (como por ejemplo http://www.favicon.cc/).

Cuidado con los acentos en la etiqueta meta description

La etiqueta meta description es la que es muestrada por los buscadores debajo del link de nuestra página web.

Debemos tener cuidado si queremos usar acentos ú otras letras que no sean ASCII en esta etiqueta, ya que, en general, los buscadores no la mostraran adecuadamente.
En lugar de usar una letra acentudada directamente debemos usar su correspondiente código de escape html.

Es algo muy sencillo que evitará dar una imagen pobre a los usuarios que encuentren nuestra web en algún buscador.

Mostrar y ocultar una imagen de carga con css

Es muy importante mostrar información al usuario sobre lo que está pasando con la página web que está visualizando.

De esta forma es conveniente, por ejemplo, mostrar una pequeña imagen cerca del botón de búsqueda cuando el usuario está esperando a que se devuelvan los resultados.

Hay muchas posibles imagenes que se pueden usar, la que usamos en nuestro ejemplo es una que hemos descargado de Ajaxload - Ajax loading gif generator.

Esta pequeña "ruedecita" se situa en nuestra página mediante el elemento:

<img id="buscando" src="images/ajax-loader.gif" />


Este elemento tiene un estilo css asociado que inicialmente no lo muestra (el elemento está oculto).

#buscando {
    position: absolute;
    left: 790px;
    top: 7px;
    visibility: hidden;
}

Posteriormente, mediante un javascript muy simple, lo mostramos y ocultamos a nuestra conveniencia para informar al usuario de que la página está realizando alguna acción y todavía no ha terminado.

Para mostrar:

document.getElementById("buscando").style.visibility = "visible";


Para ocultar:

document.getElementById("buscando").style.visibility = "hidden";


Es un efecto simple y da una muy buena impresión al usuario de nuestra web.

Usar etiquetas html5 en browsers antiguos

Es posible usar las nuevas etiquetas HTML5 (header, section, hgroup) en browsers antiguos, tales como Internet Explorer 8 y anteriores, mediante el siguiente truco.

1.- Las nuevas etiquetas HTML5 no reconocidas se muestran como si fueran "inline", cuando en realidad deben ser mostradas por el browser en modo "block". Esto es fácil de solucionar con una hoja de estilo especial que incluya las etiquetas HTML5 no reconocidas y las ponga en modo "block".

(fichero ie.css)

header, section, hgroup {
    display: block;
}

2.- El segundo problema surge cuando Internet Explorer no aplica estilos sobre etiquetas no reconocidas. Sin embargo podemos hacer que las "reconozca" mediante un javascript en la cabecera que "defina" esas etiquetas nuevas.

(fichero ie.js)

document.createElement('header');
document.createElement('section');
document.createElement('hgroup');

Finalmente podemos cargar estos nuevos elementos, la hoja de estilo y el fichero javascript, usando otro truco más, esta vez uno própio de Internet Explorer, que no permite, mediante unos comentarios HTML especiales, detectar si la página es ejecutada por un browser Internet Explorer inferior al 9.

<!--[if lt IE 9]>

  <script type="text/javascript" src="ie.js"></script>

  <link rel="stylesheet" href="ie.css" />

<![endif]-->

Por supuesto, también es posible usar directamente html5shiv, que básicamente hace esto mismo.

Facil, ¿verdad?

Autocompletar la dirección de busqueda

Es posible autocompletar la dirección de búsqueda en nuestro mapa usando las APIs de Google Places.

Si queremos autocompletar el texto de un campo de texto del tipo:

<input id="direccion" type="text" />

debemos usar un script del tipo

var inputEl = document.getElementById("direccion");

var autoComplete = new google.maps.places.Autocomplete(inputEl);

google.maps.event.addListener(autoComplete, 'place_changed', geolocalizar);

donde la segunda línea

var autoComplete = new google.maps.places.Autocomplete(inputEl);

es la que aplica el autocompletado al campo

y la tercera línea

google.maps.event.addListener(autoComplete, 'place_changed', geolocalizar);

es la que llama a la función "geolocalizar" (o cualquier otra de nuestra elección) cuando el usuario termina de buscar.

Muy simple de aplicar.

Mostrar más noticias en el mapa

Podemos mostrar más noticias en nuestro mapa si somos capaces de recoger de alguna forma lugares proximos.

Una posible forma de hacer esto es con Google Places, un nuevo API experimental (de momento).

Para cargar el API debemos cambiar en nuestro fichero html la línea

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>

por

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=true"></script>

Después podemos usar la siguiente función:

function buscarMasNoticias() {
    var map = nioos.map;
    var bounds = map.getBounds();
    var placesService = new google.maps.places.PlacesService(map);
    placesService.search(
        {bounds: bounds},
        function(results, status) {
            if (status == google.maps.places.PlacesServiceStatus.OK) {
                for (var i = 0; i < results.length; i++) {
                    var place = results[i];
                    var name = place.name;
                    var vicinity = place.vicinity;
                    var location = place.geometry.location;
                    var busqueda = name + " " + vicinity;
                    buscarNoticias(busqueda, location);
                }
            }
        }
    );
}

Lo importante aqui es crear el objeto "PlacesService", para poder usar luego el método "search", al que le pasaremos como parámetro los bordes del mapa que se está motrando (var bounds = map.getBounds();).
De los resultados recogemos el nombre y la localización y procedemos con la búsqueda de noticias, tal y como hemos hecho antes.

Mostrar noticias en el mapa

Es posible mostrar noticias (las noticias de Google News, por ejemplo) en un mapa de Google, usando los recursos que Google pone a nuestra disposición.

El fichero html será:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="css/v1/nioos.css" rel="stylesheet" />
        <script type="text/javascript" src="js/v1/nioosapp.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        <title>Nioos</title>
    </head>
    <body>
        <div class="barra-busqueda">
            <label>Dirección :</label>
            <input id="direccion" type="text" />
            <input type="button" value="Buscar" onclick="geolocalizar()" />
        </div>
        <div id="mapa"></div>
        <script type="text/javascript">
            initApp();
        </script>
    </body>
</html>

Donde:

La línea
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
carga las APIs de Google Maps.

La línea

<script type="text/javascript" src="https://www.google.com/jsapi">

es el cargador de las APIs de búsqueda de Google, con el que podremos cargar las APIs de búsqueda de noticias.


La aplicación javascript será:


var nioos = {};


function initApp() {
    google.load("search", "1");
    google.setOnLoadCallback(afterGoogleLoad);
}


function afterGoogleLoad() {
    var divMapa = document.getElementById("mapa");
    var madrid = new google.maps.LatLng(40.416691, -3.700345);
    var myOptions = {
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: madrid
    };
    var map = new google.maps.Map(divMapa, myOptions);
    nioos.map = map;
    //
    var geocoder = new google.maps.Geocoder();
    nioos.geocoder = geocoder;
    //
    google.maps.event.addListener(map, 'bounds_changed', function() {
        var timer = nioos.timer;
        clearTimeout(timer);
        timer = setTimeout(boundsChangedListener, 3000);
        nioos.timer = timer;
    });
    //
    google.maps.event.addListener(map, 'click', function() {
        closeInfoWindow();
    });
}


function closeInfoWindow() {
    var infoWindow = nioos.infoWindow;
    if (infoWindow) {
        infoWindow.close();
    }
    var oldInfoWindow = nioos.oldInfoWindow;
    if (oldInfoWindow) {
        oldInfoWindow.close();
    }
}


function boundsChangedListener() {
    var map = nioos.map;
    var center = map.getCenter();
    nioos.geocoder.geocode(
        {'latLng': center},
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var direccion = extraerDireccion(results);
                buscarNoticias(direccion, center);
            } else {
                alert('Se desconoce la dirección debido a : ' + status);
            }
        }
    );
}


function extraerDireccion(results) {
    var direccion = results[0].formatted_address;
    var address_components = results[0].address_components;
    for (var i = 0; i < address_components.length; i++) {
        var cmp = address_components[i];
        var types = cmp.types;
        if (types == "postal_code") {
            var postal_code = cmp.long_name;
            direccion = direccion.replace(postal_code, "");
        }
    }
    direccion = direccion.replace("  ", " ");
    direccion = direccion.replace(/, /g, " +");
    return direccion;
}


function buscarNoticias(direccion, center) {
    var newsSearch = new google.search.NewsSearch();
    newsSearch.setResultSetSize(1);
    newsSearch.setSearchCompleteCallback(this, searchComplete, [center, newsSearch]);
    newsSearch.execute(direccion);
}


function searchComplete(center, newsSearch) {
    if (newsSearch.results && newsSearch.results.length > 0) {
        var newsResult = newsSearch.results[0];
        var title = newsResult.titleNoFormatting;
        if (nioos[title]) {
            return;
        }
        var content = newsResult.html;
        var map = nioos.map;
        nioos[title] = content;
        var marker = new google.maps.Marker({
            position: center,
            map: map,
            title: title
        });
        var infoWindow = new google.maps.InfoWindow({
            content: content
        });
        nioos.infoWindow = infoWindow;
        google.maps.event.addListener(marker, 'click', function() {
            closeInfoWindow();
            nioos.oldInfoWindow = infoWindow;
            infoWindow.open(map, marker);
        });
    }
}


function geolocalizar() {
    var direccion = document.getElementById("direccion").value;
    nioos.geocoder.geocode(
        {
            'address': direccion
        },
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                nioos.map.setCenter(location);
            } else {
                alert('Dirección ' + direccion + ' desconocida');
            }
        }
    );
}



Donde:

La función
function initApp() {
    google.load("search", "1");
    google.setOnLoadCallback(afterGoogleLoad);
}

se encargar de cargar las APIs de búsqueda (método 'google.load("search", "1")') y de llamar a la función "afterGoogleLoad" cuando se han terminado de cargar.

La función "afterGoogleLoad()" se encarga de "pintar" el mapa y asignarle las correspondientes respuestas a eventos.

Cuando el usuario efectua una búsqueda se ejecuta el método "buscarNoticias(direccion, center)" que, usando el objeto "google.search.NewsSearch()" se encarga de buscar las noticias y mostrarlas en el mapa.

Añadir una ventana de informacion a un marcador de un mapa de Google

Es muy sencillo añadir una ventana de información a un marcador de un mapa de Google Maps (el tipo de ventana que sale cuando pinchamos encima del marcador).

El código es el siguiente:

var infoWindow = new google.maps.InfoWindow({

  content: direccion

});

google.maps.event.addListener(marker, 'click', function() {

  infoWindow.open(map, marker);

});

Donde

var infoWindow = new google.maps.InfoWindow({

  content: direccion

});

crear la ventana de información (el parámetro "content" es el texto que se mostrará al abrir la ventana de información) y

google.maps.event.addListener(marker, 'click', function() {

  infoWindow.open(map, marker);

});

la abre cuando hacemos click con el ratón encima del marcador ("marker" es el marcador previamente creado y que mostrará la ventana de información al hacer 'click' sobre él y "map" es el mapa de google maps).

Añadir una marca a un mapa de Google Maps

Es posible añadir una marca a un mapa de Google Map usando el objecto "Marker" del API.

Siguiendo con el ejemplo anterior podemos sustituir el diálogo con la dirección con una marca en el mapa.
Así, la función "boundsChangedListener()"queda:

function boundsChangedListener() {
    var map = nioos.map;
    var center = map.getCenter();
    nioos.geocoder.geocode(
        {'latLng': center},
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var direccion = results[0].formatted_address;
                new google.maps.Marker({
                    position: center,
                    map: map,
                    title: direccion
                });
            } else {
                alert('Se desconoce la dirección debido a : ' + status);
            }
        }
    );
}

El marcador se añade con el código:

new google.maps.Marker({
   position: center,
   map: map,
   title: direccion

});

donde "center" es la posición central del mapa después del desplazamiento, "map" es el mapa de Google y "title" es el texto que aparece cuando dejamos el ratón encima del marcador.

Geocodificación inversa en un mapa de Google Map

Google Map dispone de un servicio de geocodificación inversa que nos permitirá transformar de latitud y longitud a una dirección real.

Así, por ejemplo, podemos usar el evento "bounds_changed" para transformar el nuevo centro del mapa en una dirección real.

google.maps.event.addListener(map, 'bounds_changed', function() {

  var center = map.getCenter();
  nioos.geocoder.geocode(
    {'latLng': center},
    function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
        var direccion = results[0].formatted_address;
        alert('Nueva dirección : ' + direccion);
      } else {
        alert('Se desconoce la dirección debido a : ' + status);
      }
    }
  );

});

La línea

var center = map.getCenter();

recoge el centro del mapa.

La función "geocode" con el parámetro "latLng" realiza la geocodificació inversa.

Responder a eventos de Google Map

Los mapas de Google Map disparán eventos cada vez que el usuario interactua con ello (cuando los mueve, cuando cambia el zoom, etc.).

La sintaxis para usar estos eventos en javascript es muy sencilla:

google.maps.event.addListener(map, 'bounds_changed', function() {

  alert('Cambio detectado');

});

donde

map es un objeto mapa de google.
'bounds_changed' es el nombre del evento que estamos esperando.
alert('Cambio detectado'); es la respuesta al evento.

Geolocalización en un mapa de Google Maps

Las APIs de Google Maps nos permite hacer geolocalización, es decir, nos permite traducir el texto de una dirección en sus correspondientes coordenadas (latitud y longitud), que podemos usar para, por ejemplo, centrar el mapa de nuestra página web.


El código de la página es algo como:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <link href="css/v1/nioos.css" rel="stylesheet" />
        <script type="text/javascript" src="js/v1/nioosapp.js"></script>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <title>Nioos</title>
    </head>
    <body>
        <div>
            <label>Dirección :</label>
            <input id="direccion" type="text" />
            <input type="button" value="Buscar" onclick="geolocalizar()" />
        </div>
        <div id="mapa"></div>
        <script type="text/javascript">
            initApp();
        </script>
    </body>
</html>

El elemento

<input id="direccion" type="text" />

representa el campo de texto para introducir la dirección que queremos "geocodificar".

El elemento

<input type="button" value="Buscar" onclick="geolocalizar()" />

es el botón que al ser apretado realizará esta "geocodificación" mediante la función javascript "geolocalizar()" en el evento "onclick".


El código javascript es algo como:


var nioos = {};

function initApp() {
    var divMapa = document.getElementById("mapa");
    var madrid = new google.maps.LatLng(40.416691, -3.700345);
    var myOptions = {
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center: madrid
    };
    var map = new google.maps.Map(divMapa, myOptions);
    nioos.map = map;
    //
    var geocoder = new google.maps.Geocoder();
    nioos.geocoder = geocoder;
}

function geolocalizar() {
    var direccion = document.getElementById("direccion").value;
    nioos.geocoder.geocode(
        {
            'address': direccion
        },
        function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var location = results[0].geometry.location;
                nioos.map.setCenter(location);
            } else {
                alert('Dirección ' + direccion + ' desconocida');
            }
        }
    );
}


El código

var nioos = {};

inicializa un objecto javascript que iremos usando en toda nuestra aplicación.

La función

initApp()

crea y "pinta" el mapa inicial centrado en las coordenadas de Madrid y crea también el "geolocalizador" de Google Map ("var geocoder = new google.maps.Geocoder();") guardando ambos en el objeto "nioos" para su posterior uso.

La función

geolocalizar()

recoge el texto escrito en el cuadro de búsqueda ("var direccion = document.getElementById("direccion").value;") y se usa el "geocoder" para transformar ese texto a una latitud y longitud (función "geocode()" con el parámetro "address") y centrar el mapa ("nioos.map.setCenter(location);") en esa nueva localización.

Añadir un mapa de Google Maps a una página web

Google Maps dispone de un API público que permite añadir un mapa de Google Maps a nuestra página web usando javascript.

Sería algo así:


<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
        <title>Demo</title>
    </head>
    <body>
        <div id="mapa" style="width: 500px; height: 500px;"></div>
        <script type="text/javascript">

          var divMapa = document.getElementById("mapa");
          var madrid = new google.maps.LatLng(40.416691, -3.700345);

          var myOptions = {
            zoom: 6,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(divMapa, myOptions);
          map.setCenter(madrid);
        </script>
    </body>
</html>

La línea
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
importa las API de Google Maps que nos permitiran pintar el mapa.

La línea

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

define el tamaño del mapa y su posición en nuestra página web.

La línea

var madrid = new google.maps.LatLng(40.416691, -3.700345);

define la latitud y longitud de Madrid, donde posteriormente centraremos el mapa con

map.setCenter(madrid);

La línea

var myOptions = {

  zoom: 6,
  mapTypeId: google.maps.MapTypeId.ROADMAP

};

permite definir los parámetros iniciales del mapa, como el nivel de zoom y el tipo de mapa.

Añadir un archivo html a un proyecto de eclipse

Para añadir un archivo html a un proyecto de eclipse lo más cómodo es cambiar a la perspectica "Web".

Después sólo hay que seleccionar el menú

File - New - HTML File

Luego basta con rellenar el diálogo.