Creando Waypoint's rutas con google maps y guardando con php y mysql

kaninox · #1 (**permalink**) 12/11/2008, 23:57

Holas gente he estado leyendo sobre como crear rutas "waypoints" en google maps y luego mi idea es guardarlas en la base de datos para luego no se mostrar los ruteados guardados o bien exportarlos a algún gps, pero eso es otro cuento entonces, me gustaría saber si alguien sabe sobre esto, o sabe de algún manual tutorial o bien, entre todos vamos aportando a esto que supongo a mucho mas de uno le interesa, como muchos sabrán para montar google maps en su web primero deben tener una cuenta gmail para obtener una api key..... según el dominio,

en este caso para localhost o http://127.0.0.1/ como lo estoy ocupando....
y bueno pueden generar su api key desde aki : http://code.google.com/intl/es/apis/maps/signup.html

una ves generan su apikey les da el código JS que deben poner en la web, el cual no nos da los controles y nada solo el mapa, el código es el siguiente.

Código:

<!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">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Google Maps JavaScript API Example</title>
    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=XXXXXXX"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>
  </head>
  <body onload="load()" onunload="GUnload()">
    <div id="map" style="width: 500px; height: 300px"></div>
  </body>
</html>

donde XXXX es la api key que les genero.....
ahora bien si ponemos en el script las lineas....
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());

podemos ver los controles de Zoom y opciones como Mapa e Híbrido

Código:

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
//lineas agregadas
	map.addControl(new GSmallMapControl());
	map.addControl(new GMapTypeControl());
//fin lineas agregagas
        map.setCenter(new GLatLng(37.4419, -122.1419), 13);
      }
    }
    //]]>
    </script>

hasta aquí todo bien, en la linea map.setCenter(new GLatLng(37.4419, -122.1419), 13);

nos dice que los númeritos (37.4419, -122.1419) son latitud longitud y 13 es el zoom principal de nuestro mapa....

si queremos partir en una zona especifica pues nos vamos a : http://maps.google.es/ obiamente logeados y buscamos donde queremos empezar cuando cargue nuestro mapa.
Vamos haciendo doble click o bien jugando con las flechitas de google maps y una ves tengamos listo donde queremos que nuestro mapa parta al cargar, hacemos segundo botón en el mapa en algún punto y ponemos ... ruta desde aquí
al lado nos aparecerá los numeritos que deberemos reemplazar....

bueno ahora quiero saber como trazar rutas y como guardarlas en base de datos etc......
todo caso a medida valla aprendiendo voy aquí anotando mis avances tipo manual desde cero como se habrán dado cuenta :)
la idea es que este post se transforme en un aporte para todos saludos......

GatorV · #2 (**permalink**) 13/11/2008, 00:33

Tema trasladado a Javascript.

kaninox · #3 (**permalink**) 13/11/2008, 14:52

encontré la documentación al respecto por si a alguien le interesa....

http://code.google.com/apis/maps/doc...reference.html

y además me cree un sitio para poder ir viendo los avances, pueden ver el fuente etc.....

http://fdwgmaps.110mb.com/

kaninox · #4 (**permalink**) 13/11/2008, 17:12

Agrego nuevos controles

map.addControl(new GScaleControl());
Muestra una barra para informarnos sobre la escala que estamos visualizando.
Ya sean kilometros (Km), Millas (Mi), Pies, metros, etc.

map.addControl(new GOverviewMapControl());
Nos muestra un pequeño mapa en la parte inferior derecha para facilitar la navegación.

map.setMapType(G_NORMAL_MAP);
Aquí le indicamos el tipo de mapa que queremos que aparezca por defecto
Normal: G_NORMAL_MAP
Satélite: G_SATELITE_MAP
Híbrido: G_HYBRID_MAP
Si no insertamos este control, G_NORMAL_MAP es el valor por defecto.

map.disableDragging();
Desactiva la posibilidad de arrastrar el mapa. en nuestro caso esta opción no la activare, si la activas debes tener en cuenta de quitar map.addControl(new GOverviewMapControl()); y map.addControl(new GSmallMapControl()); para que el usuario se desplace por el mapa.
map.enableDragging(); viene activada por defecto.

map.addControl(new GLargeMapControl());
Muestra los controles de zoom y movimiento del mapa, lo mismo que GSmallMapControl(), pero este de forma avanzada, así que utilizaremos este desde ahora.

Todo lo iré documentando aquí y en la web que creé, si tienen algún tipo de aporte todo es bienvenido...