mapas google

leeann · #1 (**permalink**) 22/04/2008, 03:50

Hola a todos,

Tengo una web donde se añaden rutas por ejemplo: madrid-bilbao-vitoria-burgos...
Me parecía buena idea reflejar estas rutas en un mapa pero no se me ocurre como hacerlo. Quiero algo gráfico que sea mas visual. Podría ponerse en un iframe algo de google maps pasandole como parametros las ciudades? No tengo ni idea de lo que se puede hacer y no, no sé si algo así sería posible.

Alguien me pude dar alguna idea para empezar a buscar?

Gracias de antemano!

Eleazan · #2 (**permalink**) 22/04/2008, 05:21

http://code.google.com/apis/maps/doc...-advanced.html

quizás eso te sirva :)

leeann · #3 (**permalink**) 22/04/2008, 05:53

Eleazan, lo he estado mirando pero como podría poner eso en mi web? POdría poner varios sitios en la ruta en vez de solamente origen y destino?

He probado poniendo un iframe con la direccion http://maps.google.com/maps pasandole por get el saddr (origen) y el daddr (destino) pero me saca toda la página y yo solo quiero el mapa. Si voy en la página de google, me da un código para poner esa ruta en la web, pero el problema es que la ruta puede variar y no sé como poner las variables con las coordenadas.

Alguien me puede ayudar?

Eleazan · #4 (**permalink**) 22/04/2008, 06:01

leeann · #5 (**permalink**) 23/04/2008, 00:39

Alguien sabe como poner como parametros las ciudades? La key ya la he puesto, pero no sé como pasarle la ruta. Además he estado leyendo y habría que pasarle la latitud y longitud pero no se podría hacer pasando simplemente la ciudad? O hay alguna funcion para pasar una ciudad o dirección a esos parametros?

Eleazan · #6 (**permalink**) 23/04/2008, 01:39

function setDirections(fromAddress, toAddress, locale) {
gdir.load("from: " + fromAddress + " to: " + toAddress,
{ "locale": locale });
}

prueba, con setDirections("Barcelona","Madrid","es_ES"); por ejemplo

leeann · #7 (**permalink**) 23/04/2008, 02:51

Pues ya lo siento, lo he intentado pero no me sale!

He puesto la funcion dentro de head, pero donde tengo que poner el resto? En el load? DEntro del codigo php?

el mapa lo he puesto donde quiero que salga pero ¿Tengo que meterlo dentro de una capa o algo por el estilo?

Eleazan · #8 (**permalink**) 23/04/2008, 08:22

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  xmlns:v="urn:schemas-microsoft-com:vml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example: Advanced Directions</title>
    <script src=" http://maps.google.com/?file=api&amp;v=2.x&amp;key=ABQIAAAAzr2EBOXUKnm_jVnk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA"
      type="text/javascript"></script>
    <style type="text/css">
      body {
        font-family: Verdana, Arial, sans serif;
        font-size: 11px;
        margin: 2px;
      }
      table.directions th {
	background-color:#EEEEEE;
      }
	  
      img {
        color: #000000;
      }
    </style>
    <script type="text/javascript">
 
    var map;
    var gdir;
    var geocoder = null;
    var addressMarker;

    function initialize() {
      if (GBrowserIsCompatible()) {      
        map = new GMap2(document.getElementById("map_canvas"));
        gdir = new GDirections(map, document.getElementById("directions"));
        GEvent.addListener(gdir, "load", onGDirectionsLoad);
        GEvent.addListener(gdir, "error", handleErrors);

        setDirections("Madrid", "Barcelona", "es_ES");
      }
    }
    
    function setDirections(fromAddress, toAddress, locale) {
      gdir.load("from: " + fromAddress + " to: " + toAddress,
                { "locale": locale });
    }

    function handleErrors(){
	   if (gdir.getStatus().code == G_GEO_UNKNOWN_ADDRESS)
	     alert("No corresponding geographic location could be found for one of the specified addresses. This may be due to the fact that the address is relatively new, or it may be incorrect.\nError code: " + gdir.getStatus().code);
	   else if (gdir.getStatus().code == G_GEO_SERVER_ERROR)
	     alert("A geocoding or directions request could not be successfully processed, yet the exact reason for the failure is not known.\n Error code: " + gdir.getStatus().code);
	   
	   else if (gdir.getStatus().code == G_GEO_MISSING_QUERY)
	     alert("The HTTP q parameter was either missing or had no value. For geocoder requests, this means that an empty address was specified as input. For directions requests, this means that no query was specified in the input.\n Error code: " + gdir.getStatus().code);

	//   else if (gdir.getStatus().code == G_UNAVAILABLE_ADDRESS)  <--- Doc bug... this is either not defined, or Doc is wrong
	//     alert("The geocode for the given address or the route for the given directions query cannot be returned due to legal or contractual reasons.\n Error code: " + gdir.getStatus().code);
	     
	   else if (gdir.getStatus().code == G_GEO_BAD_KEY)
	     alert("The given key is either invalid or does not match the domain for which it was given. \n Error code: " + gdir.getStatus().code);

	   else if (gdir.getStatus().code == G_GEO_BAD_REQUEST)
	     alert("A directions request could not be successfully parsed.\n Error code: " + gdir.getStatus().code);
	    
	   else alert("An unknown error occurred.");
	   
	}

	function onGDirectionsLoad(){ 
      // Use this function to access information about the latest load()
      // results.

      // e.g.
      // document.getElementById("getStatus").innerHTML = gdir.getStatus().code;
	  // and yada yada yada...
	}
    </script>

  </head>
  <body onload="initialize()" onunload="GUnload()">
  
  <h2>Maps API Directions Illustrated</h2>
  <form action="#" onsubmit="setDirections(this.from.value, this.to.value, this.locale.value); return false">

  <table>

   <tr><th align="right">De:&nbsp;</th>

   <td><input type="text" size="25" id="fromAddress" name="from"
     value="Madrid"/></td>
   <th align="right">&nbsp;&nbsp;A:&nbsp;</th>
   <td align="right"><input type="text" size="25" id="toAddress" name="to"
     value="Bcn" /></td></tr>

   <tr><th>Idioma:&nbsp;</th>
   <td colspan="3"><select id="locale" name="locale">

    <option value="en" >English</option>

    <option value="fr">French</option>

    <option value="de">German</option>
    <option value="ja">Japanese</option>
    <option value="es" selected>Spanish</option>
    </select>

    <input name="submit" type="submit" value="Ir!" />

   </td></tr>
   </table>

    
  </form>

    <br/>
    <table class="directions">
    <tr><th>¿Como llegar?</th><th>Map</th></tr>

    <tr>
    <td valign="top"><div id="directions" style="width: 275px"></div></td>
    <td valign="top"><div id="map_canvas" style="width: 310px; height: 400px"></div></td>

    </tr>
    </table> 
  </body>
</html>

Si quieres, puedes poner <button> y en ellos, en el evento "onClick" pones la función que te dije, por ejemplo

<button onclick='setDirections("Zaragoza", "Valencia Spain","es");'>Zaragoza-Valencia!</button>

Este ejemplo te lo pongo para que veas como es con Valencia, por ejemplo, pq hay varias :). Sino daria un alert con error ^^

GatorV · #9 (**permalink**) 23/04/2008, 10:46

Tema trasladado a JavaScript.

leeann · #10 (**permalink**) 24/04/2008, 01:53

Muchas gracias por el ejemplo. Ahora tengo más claro donde colocar todo!

Saludos

leeann · #11 (**permalink**) 29/05/2008, 03:10

He puesto esto en mi web y funciona correctamente. Muchas gracias por todo.
Ahora tengo una pequeña duda: podría hacerse de alguna manera que salga una ruta de varios puntos? Es decir yo ahora en set directions puedo poner madrid, bilbao, pero podría hacerse algo de alguna manera para que dibuje una ruta de más de dos puntos? Madrid, Bilbao, Vitoria

josepbertran · #12 (**permalink**) 24/09/2009, 02:09

Muchisimas gracias por compartir, me han sacado de un buen apuro
Adiós