APIs GOOGLE MAPS
Este tutorial pretender explicar las API’s de Google para crear mapas en nuestros sitios web. Para ello crearemos una pequeña aplicación práctica en donde señalaremos los pueblos por los que pasa el camino Francés del Camino de Santiago.
Para comenzar a utilizar las API’s de google maps necesitaremos entrar en Google Maps Key y conseguir una clave para utlizar la API en nuestro sitio web.
En mi caso, la clave es la siguiente:
ABQIAAAAE6_YX3xR4O-y-aVOxUSY7RTSEXBORVwpjYChIyrk62hDXwRGGxRxdT0wnewet7RIspmgTEkaziTEuQ |
Vamos a hacer un mapa que nos muestre todos los pueblos por donde se desarrolla el camino francés. Para ello necesitamos las coordenadas de los pueblos. Os las podéis descargar aquí.
En primer lugar es necesario crearse un mapa; es tan fácil como esto:
<div id="map" style="width: 500px; height: 300px"</div> |
Para inicializar ese mapa, debemos implementar las funciones load y OnUnload del objeto body y añadir un script javascript de google. En el script debemos añadir nuestra clave.
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAE6_YX3xR4O-y-aVOxUSY7RTSEXBORVwpjYChIyrk62hDXwRGGxRxdT0wnewet7RIspmgTEkaziTEuQ"
type="text/javascript></script>
<body onload="load()" onunload="GUnload();">
<script type="text/javascript">
var map = null;
var geocoder = null;
geocoder = new GClientGeocoder();
function load() {
if (GBrowserIsCompatible()) {
/*Creamos el mapa*/
map = new GMap2(document.getElementById("map"));
/*Añadimos un control*/
map.addControl(new GSmallMapControl());
/*Añadimos un control*/
map.addControl(new GMapTypeControl());
/*Centramos el mapa en un punto*/
map.setCenter(new GLatLng(36.03133177633187, -5.80078125), 5);
}//fin navegador compatible
}//fin load
function GUnload(){
}
</script> |
Todo punto que queramos representar en el mapa, consta de 2 magnitudes, longitud y latitud terrestre. En las API’s de Google Maps un punto se representa con el siguiente código
/*Creamos un punto*/ var point = new GLatLng(40.44871878033367, -3.800346851348879); /*Lo añadimos al mapa, A un mapa se le añade un marcador*/ map.addOverlay(crearMarcador(point, "Pozuelo")); |
La función crearMarcador, es de cosecha propia, y nos va a permitir limpiar un poco más el código:
function crearMarcador(point, descripcion,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(descripcion); });
return marker;
} |
Visto esto, tenemos ya en mente lo que tenemos que hacer para poder marcar todos los pueblos del camino fránces. Tenemos que hacer una consulta a base de datos para recuperar todas las coordenadas de los pueblos, para posteriormente generar tantos marcadores como pueblos haya:
<?php
**Query BBDD***
while($row = mysql_fetch_array($resulset)){
$longitud = $row["longitud"];
$latitud = $row["latitud"];
$nombrePueblo = $row["nombrePueblo"];
echo <<<MARCA
var point = new GLatLng("$longitud","$latitud");
var marker = crearMarcador(point, "$nombrePueblo",icono)
map.addOverlay (marker);
MARCA;
}
?> |
El resultado lo podeis ver aquí.
