Integración HTML de un mapa Google

1. Descarga y descomprime el archivo googlemaps.zip en la carpeta miweb\googlemaps

2. Como resultado de la extracción encontrarás varios archivos:

Google Maps

index.htm. Si haces doble clic sobre este archivo se abrirá el navegador web mostrando un mapa de Google del área que hemos seleccionado.
gmap.swf. Es el objeto flash que se conecta con Google Maps y muestra el mapa interactivo.
swfobject.js. Es el archivo de código javascript que evita tener que hacer clic sobre el mapa para activarlo previamente si se accede con Internet Explorer.
evaristo.kml. Es una archivo de etiquetas con extensión *.kml que contiene la información de los marcadores que aparecerán en el mapa.

3. Abre Kompozer.

4. Selecciona Archivo > Abrir para localizar y abrir el archivo index.htm situado en la carpeta miweb\googlemaps

5. En la parte inferior de la página pulsa sobre la pestaña Código fuente

6. El código HTML que inserta en la página el objeto de Flash es el siguiente:

<html>
<head>
<script type="text/javascript" src="swfobject.js"></script>
<title>Google Maps</title>
</head>
<body>
<h1>Google Maps</h1>
<div id="gmaps">This text will be replaced</div>
<script type="text/javascript">
var so = new SWFObject('gmap.swf','mpl','650','500','9');
so.addVariable('clatitud','43.5327566488622');
so.addVariable('clongitud','-5.674635881667000');
so.addVariable('route','evaristo.kml');
so.addVariable('zoom','16');
so.addVariable('maptype','satellite');
so.addVariable('czoom','true');
so.addVariable('cposition','true');
so.addVariable('ctype','true');
so.addVariable('cnavigator','false');
so.write('gmaps');
</script>
</body>
</html>

7. Observa que la referencia al objeto flash está en gmap.swf de SWFObject.

8. En la sintaxis se pueden definir los distintos parámetros con que se mostrará inicialmente el mapa:

clatitud y clongitud son las coordenadas geográficas en formato decimal del punto central del mapa.
route se refiere al nombre del archivo KML que contiene la información de ubicación de los marcadores. En este caso evaristo.kml.
zoom es el grado de magnificación con que se visualizará inicialmente el mapa.
maptype indica el tipo de mapa que se mostrará inicialmente: satellite, map o hybrid.
czoom si tiene valor “true" (verdadero) el usuario dispondrá del control del zoom.
ctype si tiene valor “true” (verdadero) el usuario dispondrá de los botones para cambiar al modo de mapa, satélite o híbrido.
cnavigator si tiene valor=”true” se podrá disponer del control de navegación para poder moverse por el mapa con más comodidad.

9. Prueba a modificar algunos de estos parámetros iniciales y comprobar el resultado que produce.

10. Minimiza Kompozer y abre el archivo evaristo.kml utilizando el editor de textos por defecto del sistema.

11. Repasando las etiquetas de este documento observa que el marcador y sus propiedades están definidas entre las etiquetas <Placemark> … </Placemark>. Respetando la sintaxis se pueden añadir más etiquetas o bien modificar los datos de este marcador para situarlo en otro sitio.