logotipo de el mundo de deckerix
El mundo de deckerix
mascotas
El mundo de deckerix. [x]
logotipo de el mundo de deckerix

El mundo de Deckerix 0.4


by Oscar Carrascosa Blanco


Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 65

Deprecated: Function split() is deprecated in /homepages/43/d272195232/htdocs/src/utiles/Fecha.php on line 66
Agosto 28 2008 19:28:39

APIs GOOGLE MAPS by deckerix

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í.

Nombre * (obligatorio)

Email

Web

El mundo de Deckerix es una creación de Óscar Carrascosa Blanco.

deckerix@gmail.com