ago 04

Aunque el contenido de este post estará un poco desactualizado voy a explicar como hice el post original de los sitios interesantes de Vigo. Digo que está desactualizado porque con WordPress, es tan fácil como instalar un plugin como geoxml y listo, aunque vendrá bien para quienes quieren ponerlo en cualquier otra web.

Lo primero es hacerse con una key de google maps en http://www.google.com/apis/maps/signup.html.

Luego, hay que hacer el listado de puntos de interés. Se puede hacer con google maps o con google earth. Para ello, se marcan los puntos de interés y luego se guardan en formato kml.

Después hay que insertar un código javascript en el html donde queramos que aparezca nuestro mapa. Esto creará una instancia del objeto GGeoXml. El constructor del objeto GGeoXml tiene como parámetro la ruta al archivo kml que contiene los datos geoposicionados. Esto se muestra en el siguiente ejemplo:

——————-
<script src=”http://maps.google.com/maps?file=api&v=2&key=[key] type=”text/javascript”></script>
<script type=”text/javascript”>

//<![CDATA[

var map;
var geoXml = new GGeoXml("[URL del kml]“);
var toggleState = 1;

function onLoad() {
if (GBrowserIsCompatible()) {
map = new GMap2(document.getElementById(“map”));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng([coordenadas]), 11, G_HYBRID_MAP);

map.addOverlay(geoXml);
}
}

//]]>
</script>
——————-

En el código anterior, hay que cambiar [key] por la nuestra key de google maps, la [URL del kml] por la URL real del kml con puntos de interés que hayamos creado previamente y [coordenadas], por las coordenadas de inicio de nuestro mapa. Para obtener las coordenadas, se puede usar, por ejemplo, la url que google maps te devuelve cuando pinchas en el link de la parte superior derecha “Enlazar con esta página”.

——————–

http://maps.google.es/maps?ie=UTF8&ll=42.230789,-8.709519 (…)

——————–

A partir del link, tomamos el parámetro ll y en el código javascript quedaría como

——————–

map.setCenter(new GLatLng(42.230789,-8.709519), 11, G_HYBRID_MAP);

——————–

Por último, hay que ejecutar la función onLoad, por ejemplo, añadiendo onLoad() en el evento onload de la página y añadir un elemento en el que se vaya a cargar.

——————–

<body onload=”onLoad()”>

——————–

En este ejemplo, el elemento es:

——————–

<div id=”map” style=”width: 550px; height: 450px”></div>

——————–

Con lo que nuestro mapa tendría unas dimensiones de 550×450.

Y esto es todo. Para más funcionalidades, se puede consultar el API de google maps.

Valorar esta entrada:

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (Todavía no hay valoraciones)
Loading ... Loading ...

Entradas relacionadas:

    None Found

Dejar una respuesta