Foros del web, para los que viven de bits

leeann · 22-abr-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 · 22-abr-2008, 05:21

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

quizás eso te sirva :)

leeann · 22-abr-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 · 22-abr-2008, 06:01

leeann · 23-abr-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 · 23-abr-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 · 23-abr-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 · 23-abr-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 · 23-abr-2008, 10:46

Tema trasladado a JavaScript.

leeann · 24-abr-2008, 01:53

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

Saludos

leeann · 29-may-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

22-abr-2008, 03:50	#1 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	mapas google 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!

22-abr-2008, 05:21	#2 (permalink)
Eleazan Fecha de Ingreso: abril-2008 Mensajes: 232	Re: mapas google http://code.google.com/apis/maps/doc...-advanced.html quizás eso te sirva :)

22-abr-2008, 05:53	#3 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	Re: mapas google 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?

22-abr-2008, 06:01	#4 (permalink)
Eleazan Fecha de Ingreso: abril-2008 Mensajes: 232	Re: mapas google <script src=" http://maps.google.com/?file=api&v=2.x&key=ABQIAAAAzr2EBOXUKnm_jV nk0OJI7xSosDVG8KKPE1-m51RBrvYughuyMxQ-i1QfUnH94QxWIa6N4U6MouMmBA" type="text/javascript"></script> esto seria el mapa, pero deberias cambiar la key por una para ti.... Luego, las direcciones se pondrian mediante javascript Ahora mismo piro pa casa, que termino el curro, luego te digo como si nadie lo ha hecho :)

23-abr-2008, 00:39	#5 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	Re: mapas google 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?

23-abr-2008, 01:39	#6 (permalink)
Eleazan Fecha de Ingreso: abril-2008 Mensajes: 232	Re: mapas google function setDirections(fromAddress, toAddress, locale) { gdir.load("from: " + fromAddress + " to: " + toAddress, { "locale": locale }); } prueba, con setDirections("Barcelona","Madrid","es_ES"); por ejemplo

23-abr-2008, 02:51	#7 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	Re: mapas google 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?

23-abr-2008, 10:46	#9 (permalink)
GatorV $this->role('moderador'); Fecha de Ingreso: mayo-2006 Ubicación: /home/ags/ Mensajes: 13.970	Re: mapas google Tema trasladado a JavaScript. __________________ Blog Web

24-abr-2008, 01:53	#10 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	Re: mapas google Muchas gracias por el ejemplo. Ahora tengo más claro donde colocar todo! Saludos

29-may-2008, 03:10	#11 (permalink)
leeann Fecha de Ingreso: febrero-2006 Mensajes: 201	Respuesta: mapas google 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

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado