Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mapa al estilo Google

Estas en el tema de Mapa al estilo Google en el foro de Frameworks JS en Foros del Web. Buenas antes que nada gracias por respondera a todos!!! me gustaria saber si se podria llegar a hacer mapas al estilo google maps y si ...
  #1 (permalink)  
Antiguo 22/07/2011, 08:29
Avatar de simplementeronin  
Fecha de Ingreso: mayo-2010
Mensajes: 23
Antigüedad: 7 años, 6 meses
Puntos: 3
Información Mapa al estilo Google

Buenas antes que nada gracias por respondera a todos!!!

me gustaria saber si se podria llegar a hacer mapas al estilo google maps y si alguien me podria tirar una idea de como hacer mejor... ya tengo los mapas que los hice con autocad y quiero ver como puedo hacer una web al estilo google maps...
es para una ciudad pequeña y quisiera colocar puntos historicos y referencias de lugares e incluso algunos "como llegar"!!!

gracias a todos y mis disculpas a los moderadores si ya existe un post parecido!!! la verdad ya revise y nada!!! (por ahi revise mal) ajajaja
  #2 (permalink)  
Antiguo 22/07/2011, 17:18
Avatar de perryjr  
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 7 años, 3 meses
Puntos: 27
Respuesta: Mapa al estilo Google

mmm Sé que Google Maps ofrece opciones para reenderizar tus propias cosas, es decir, Google pone todo el javascript y botones y zoom y todo eso engorroso, y lo único que hace es enviarte peticiones a tu servidor tipo:

/mapa.php?zoom=XXX&width=XXX&height=XXX

o algo así. No te puedo concretar mucho porque no lo he llegado a usar, pero si me dejas media hora puedo subir un ejemplo a mi web y te paso el link aquí mismo para que puedas ver el JavaScript y eso
__________________
I (L) Google
  #3 (permalink)  
Antiguo 22/07/2011, 17:42
Avatar de perryjr  
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 7 años, 3 meses
Puntos: 27
Respuesta: Mapa al estilo Google

A ver, lo único que no vas a poder ver, es que cada vez que solicitas una parte del mapa salen un chorrón de peticiones tipo así:

/tiles?x=0&y=0&z=0

o los valores que correspondan para x, y, z en el mapa y yo le devuelvo una imagen (en este caso la he dibujado con mandelbrot, en tu caso serán imágenes guardadas)

La web está en:
http://mapas-estilo-google.vampiros-noche.appspot.com/

Lo único que te pido es que hicieras el favor de mirarla hoy o mañana y me avisases cuando termines. Lo siento por los que lleguen después, pero el algoritmo para dibujar Mandelbrot es bastante pesado y estoy en un host gratuito que me impone límites. Podéis ver el código de la página HTML aquí:

http://code.google.com/p/appengine-g...lbrot/map.html
__________________
I (L) Google
  #4 (permalink)  
Antiguo 23/07/2011, 17:38
Avatar de simplementeronin  
Fecha de Ingreso: mayo-2010
Mensajes: 23
Antigüedad: 7 años, 6 meses
Puntos: 3
Respuesta: Mapa al estilo Google

muchas gracias!!! me es de mucha ayuda!!!

esta muy bueno tu ejemplo!!!

gracias!!!
  #5 (permalink)  
Antiguo 23/07/2011, 17:40
Avatar de simplementeronin  
Fecha de Ingreso: mayo-2010
Mensajes: 23
Antigüedad: 7 años, 6 meses
Puntos: 3
Respuesta: Mapa al estilo Google

solo una ultima pregunta: mire el codigo fuente

[URL="http://code.google.com/p/appengine-go/source/browse/example/mandelbrot/map.html"]http://code.google.com/p/appengine-go/source/browse/example/mandelbrot/map.html[/URL]

y no me queda claro en que parte levanta las imagenes!!!

si me lo podrias aclarar!!! te agrdeceria mucho!!!
  #6 (permalink)  
Antiguo 23/07/2011, 18:53
Avatar de perryjr  
Fecha de Ingreso: julio-2010
Ubicación: Granada, Spain, Spain
Mensajes: 190
Antigüedad: 7 años, 3 meses
Puntos: 27
Respuesta: Mapa al estilo Google

Es verdad que no es un código para principiantes, nunca dije que era fácil, pero estoy dispuesto a explicarte todo lo que tu quieras preguntar. El código crea un objecto (llamado mbTypeOptions) para guardar las opciones del mapa. Dentro de ese objeto crea una función (en realidad el concepto es muy parecido al de «clase» en Java o C++):
Código Javascript:
Ver original
  1. getTileUrl: function(coord, zoom) {
  2.       var nc = getNormalizedCoord(coord, zoom);
  3.       if (nc == null) {
  4.         return '';
  5.       }
  6.       var url = '/tiles?z=' + zoom + '&x=' + nc.x + '&y=' + nc.y;
  7.       if ({{InProd}}) {
  8.         // Shard across multiple domains so that browsers that are limited in
  9.         // the number of in-flight requests per domain will load more quickly.
  10.         // Compute the shard deterministically to be cache-friendly.
  11.         var i = (nc.x + (2 * nc.y)) % 4;
  12.         url = 'http://' + i + '.' + document.location.host + url;
  13.       }
  14.       return url;
  15.     },

De aquí la parte interesante es esto:

var url = '/tiles?z=' + zoom + '&x=' + nc.x + '&y=' + nc.y;

el resto es un truquito para que el navegador lance mas respuestas paralelas al servidor y vaya más rápido ("shard")

Esta línea le dice al mapa que cada vez que necesite un tile (piensa en un tablero de ajedrez, cada uno de los cuadraditos es un tile, por ejemplo; o en los juegos, que usan el mismo concepto) tiene que hacer una petición al servidor, a la dirección que yo le diga, en este caso:

var url = '/tiles?z=[...]&x=[...]&y=[...]';

Esto significa que, si por ejemplo el mapa tuviera solo cuatro tiles (tienen unos pocos mas en la realidad) y estuviera a un zoom de cero, yo voy a empezar a recibir peticiones al servidor así:

/tiles?z=0&x=0&y=0
/tiles?z=0&x=1&y=0
/tiles?z=0&x=0&y=1
/tiles?z=0&x=1&y=1

Y como respuesta espera recibir las imágenes correspondientes a ese zoom(0) y esas (X,Y)

Si ahora el usuario hace zoom hasta z=5, y seguimos viendo solamente cuatro tiles, pues recibiría un pilón de peticiones así:

/tiles?z=5&x=0&y=0
/tiles?z=5&x=1&y=0
/tiles?z=5&x=0&y=1
/tiles?z=5&x=1&y=1

La dirección es /tiles, pero puede ser la que tu quieras, ejemplo:

var url = '/mapa.php?z=[...]&x=[...]&y=[...]';


¿En qué te ayuda todo este lío? Pues que implementar todo el JavaScript y «truquitos» para cada navegador te llevaría años, mucho dinero y un equipo entero. Usando Google Maps todo queda reducido a unas cuantas líneas de Javascript para configurar el mapa, y por supuesto un montón de procesamiento en el lado del servidor para guardar/enviar las imagenes.

Me parece que era esto lo que preguntabas, pero si te quedan dudas, como decía al principio, no dudes en preguntar lo que quieras =)
__________________
I (L) Google

Última edición por perryjr; 23/07/2011 a las 18:55 Razón: Tanta x y ya me habia equivocado :)

Etiquetas: ajax, estilo, google, mapas, maps
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:29.