Foros del Web » Programando para Internet » Javascript »

ruta absoluta imagen marcador google maps

Estas en el tema de ruta absoluta imagen marcador google maps en el foro de Javascript en Foros del Web. Hola a todos: Estoy tratando de hacer un aplicativo en google maps basado en esta solución. http://css-tricks.com/google-maps-slider/ Como se dan cuenta la aplicación carga un ...
  #1 (permalink)  
Antiguo 30/04/2013, 14:35
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 12 años, 9 meses
Puntos: 181
ruta absoluta imagen marcador google maps

Hola a todos:

Estoy tratando de hacer un aplicativo en google maps basado en esta solución.

http://css-tricks.com/google-maps-slider/

Como se dan cuenta la aplicación carga un mapa a medida que el usuario pasa el raton por el enlace de distintos lugares. Lo que yo ahora quiero hacer es lo mismo pero que el usuario pueda escoger con un select la ciudad y en función de la ciudad que seleccione se muestren los marcadores de la ciudad. Eso lo he hecho con ajax y funciona bien, sin embargo por ser ajax la imagen que coloca el marcador no lo encuentra y por tanto cargan los lugares pero no asi el marcador.

He tratado cargar la imagen con la dirección absoluta pero sigue sin mostrarse.

Código Javascript:
Ver original
  1. var image = new google.maps.MarkerImage(
  2.         'http://midireccion.com/imagenes/sprite.png'
  3.         //'sprite.png'
  4.         , new google.maps.Size(67,86)
  5.         , new google.maps.Point(0,0)
  6.         , new google.maps.Point(34,86)
  7.         );

No se como hacer para que se vea la imagen, si lo cargo sin ajax funciona bien. Agradezco cualquier colaboración o ideas que me puedan ayudar a lograrlo, gracias por su colaboración de antemano.
__________________
Blog de humor http://elcuasatar.net63.net/
  #2 (permalink)  
Antiguo 03/05/2013, 08:34
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ruta absoluta imagen marcador google maps

Hola cuasatar:

Por lo que estoy viendo en el enlace que refieres, no veo necesidad de trabajar con ajax, ya que el juego de los marcadores lo hace conjugando mouseenter y hover en javascript (jQuery)

Si te fijas, las coordenadas del marcador que se muestra (y la información con sus estilos que se muestran a la derecha), las toma de la lista:
Código HTML:
Ver original
  1. <ul id="locations">    
  2.         <li data-geo-lat="41.9786" data-geo-long="-87.9047">
  3.           <h3>O'Hare Airport</h3>
  4.           <p>Flights n' stuff</p>
  5.           <!-- ... -->
Después, en javascript
Código Javascript:
Ver original
  1. $("#locations li").mouseenter(function() {      
  2.         $el = $(this);                
  3.         if (!$el.hasClass("hover")) {        
  4.           $("#locations li").removeClass("hover");
  5.           $el.addClass("hover");        
  6.           if (!first) {            
  7.             // Clear current marker
  8.             curMarker.setMap();            
  9.             // Set zoom back to Chicago level
  10.             // map.setZoom(10);
  11.           }          
  12.           // Move (pan) map to new location
  13.           pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
  14.           map.panTo(pointToMoveTo);
  15.           // ...

Es decir, oculta el anterior y muestra el marcador correspondiente al nuevo hover sin que llame a nuevos datos porque ya están en el <li> correspondiente, cargado en página.

Si lees el artículo que presenta el ejemplo (en traducción de google) explica
Código sic:
Ver original
  1. "... Un ejemplo sencillo sería si se hace clic en un marcador, puede cambiar el nivel de zoom del mapa, cambiar la información mostrada en otra parte de la página, o en realidad cualquier cosa que usted puede querer hacer con JavaScript. ... "

El que el marcador (Marker) tenga ruta relativa o absoluta no debería importar.
  #3 (permalink)  
Antiguo 03/05/2013, 12:25
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 12 años, 9 meses
Puntos: 181
Respuesta: ruta absoluta imagen marcador google maps

Gracias por tu respuesta. Si bien el script original no necesita ajax ya que como bien lo indicas los datos se leen directamente al usar las acciones yo quiero hacerle una mejora al script y es poder que el usuario tenga control sobre la ciudad que escoge (si te fijas en el script original muestran solo la ciudad de Chicago)

La manera como se me ocurrio inicialmente fue con ajax con el fin de que se seleccionara una ciudad y en función de esa ciudad se muestre los resultados. El problema es que como bien sabes al ser asincrono ajax necesita las rutas absolutas para poder encontrar los recursos. Lo intente de diversas formas y como tal si funciona el aplicativo pero no me muestra el marcador y en una función de mapa el no tener el marcador dificulta llegar al usuario. De momento lo he implementado con que salga una ciudad aleatoriamente cada vez que carga la pagina pero me gustaria que el usuario pudiera tener el control de seleccionar a gusto su ciudad y el marcador salga personalizado.

No se si es falta de conocimientos en ajax por lo cual no puedo mostrar el marcador asi que cualquier idea al respecto es bien recibida.
__________________
Blog de humor http://elcuasatar.net63.net/
  #4 (permalink)  
Antiguo 03/05/2013, 13:54
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ruta absoluta imagen marcador google maps

Necesitaría ver tu código (html y javascrip, entendiendo que AJAX es el acrónimo de Asynchronous JavaScript And XML) para ayudarte.

Personalmente utilizo el Ajax para envío de datos a MySQL o generar XML. Y los marcadores los paso en rutas relativas incluso desde terceros archivos, salvo que recurra a archivos extrernos.

Otras acciones como implementar o quitar marcadores, incluso desde datos desde otros archivos (json, xml, kml), los realizo perfectamente recurriendo o no a Ajax.

Un ejemplo típico es el implementar rutas, relieves de las mismas, o marcadores desde archivos externos (TrafficLayer, WeatherLayer, ElevationService o $.getJSON)

En tales casos, llamo a la función desde HTML mediante onchange="mifuncion();" que puede ser onclick ... y en javascript
Código Javascript:
Ver original
  1. mifuncion(){
  2. // el código de llamada, posición del marcador, nuevo zoom, centrado de mapa o lo que quiera hacer //
  3. }
En todo ello generalmente no es necesario recargar el mapa/la página incluso teniendo que "limpiar" el marcador anterior, su información o ventana (infowindows) etc.

Reitero, si con mi referencia no lo solucionas, envía código o enlace para verlo.

Reedito:
Si con Ajax trasladas o generas datos externos, será inevitable que se recargue la página para ver los nuevos datos.
  #5 (permalink)  
Antiguo 03/05/2013, 14:11
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 12 años, 9 meses
Puntos: 181
De acuerdo Respuesta: ruta absoluta imagen marcador google maps

Bueno, como veras no es nada del otro mundo el script, es muy parecido a la solución de la cual mande el enlace.

La parte que llama a al script es un simple select:

Código HTML:
Ver original
  1. <select name="ciudades" onchange="mostrarMapas(this.value)">
  2.                 <option value="">Seleccione una ciudad:</option>
  3.                    <option value="Ciudad 1">Ciudad 1</option>
  4.                   <option value="Ciudad 2">Ciudad 2</option>
  5.                   <option value="Ciudad 3">Ciudad 3</option>
  6. <div id="cont-map"></div>

La parte ajax es muy sencilla tambien:

Código Javascript:
Ver original
  1. function jsDinamic(direccion,tipo){
  2.   var g=document.createElement("script");
  3.   g.src=direccion;
  4.   g.type=tipo;
  5.   document.body.appendChild(g);
  6.   }
  7.  
  8. function mostrarMapas(str)
  9. {
  10. var xmlhttp;    
  11. if (str=="")
  12.   {
  13.   document.getElementById(""cont-map").innerHTML="";
  14.  return;
  15.  }
  16. if (window.XMLHttpRequest)
  17.  {// code for IE7+, Firefox, Chrome, Opera, Safari
  18.  xmlhttp=new XMLHttpRequest();
  19.  }
  20. else
  21.  {// code for IE6, IE5
  22.  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  23.  }
  24. xmlhttp.onreadystatechange=function()
  25.  {
  26.  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  27.    {
  28.      jsDinamic("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js","text/javascript");
  29.       jsDinamic("http://maps.google.com/maps/api/js?sensor=false&amp;language=es","text/javascript");  
  30.       jsDinamic("http://midireccion/mapasdinamicos.js","text/javascript");
  31.       document.getElementById("cont-map").innerHTML=xmlhttp.responseText;
  32.     }
  33.   }
  34. xmlhttp.open("GET","mapa.php?ciudad="+str,true);
  35. xmlhttp.send();
  36. }

El archivo php simplemente carga de manera dinamica las listas tal y como lo viste en el enlace que te mostre y cambia en función de la ciudad. Simplemente se encarga de leer un xml, genera la lista y carga el div map-canvas que es donde se mostrara el mapa.

Por ultimo el javascript que hace la "magia" que es casi igual a la solución que viste en la pagina.

Código Javascript:
Ver original
  1. $(function() {
  2.       //esto no importa que centro tenga porque al final en función de la ciudad cambia el centro, solo sirve para inicializar
  3.       var chicago = new google.maps.LatLng(41.924832, -87.697456),
  4.           pointToMoveTo,
  5.           first = true,
  6.           curMarker = new google.maps.Marker({}),
  7.           $el;
  8.      
  9.       var options = {
  10.           zoom: 16,
  11.           center: chicago,
  12.           mapTypeId: google.maps.MapTypeId.ROADMAP
  13.         };
  14.      
  15.       var map = new google.maps.Map($("#map_canvas")[0], options);
  16.       var image = new google.maps.MarkerImage(
  17.         'images/sprite.png'//aqui sospecho que es el error pero es una sospecha
  18.         );
  19.        
  20.       $("#locations li").mouseenter(function() {
  21.         $el = $(this);
  22.         if (!$el.hasClass("hover")) {
  23.        
  24.           $("#locations li").removeClass("hover");
  25.           $el.addClass("hover");
  26.        
  27.           if (!first) {
  28.            
  29.             // Clear current marker
  30.             curMarker.setMap();
  31.                        
  32.             // Set zoom back to Chicago level
  33.             // map.setZoom(10);
  34.           }
  35.          
  36.           // Move (pan) map to new location
  37.           pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
  38.           map.panTo(pointToMoveTo);
  39.          
  40.           // Add new marker
  41.           curMarker = new google.maps.Marker({
  42.               position: pointToMoveTo
  43.                , title: $el.attr("data-marcador")
  44.               ,map: map
  45.               ,icon: image
  46.            });
  47.          
  48.           // On click, zoom map
  49.           google.maps.event.addListener(curMarker, 'click', function (e) {
  50.              map.setZoom(14);
  51.           });
  52.          
  53.           first = false;
  54.         }
  55.        
  56.       });
  57.      
  58.       $("#locations li:first").trigger("mouseenter");
  59.     });

Gracias por tu colaboración desinteresada. De funcionar funciona, de mostrar el marcador eso si no por eso pido una guia para revaluar la solución.
__________________
Blog de humor http://elcuasatar.net63.net/

Última edición por cuasatar; 03/05/2013 a las 14:18
  #6 (permalink)  
Antiguo 03/05/2013, 15:29
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ruta absoluta imagen marcador google maps

En algo me he perdido.
Perdona que todo sean preguntas:
- Mediante el <select> llamas a la función mostrarMapas(this.value) ¿Y después de elegir la ciudad, en la función llamas a jquery y maps.google? Si de todas formas lo vas a necesitar, yo lo insertaría directamente en cabecera.
- <div id="cont-map"> ¿Contiene algo, el valor del <select> o se inicia vacío? (<div id="cont-map"></div>)
- En el javascript, el del mapa, llamas a
Código Javascript:
Ver original
  1. $("#locations li").mouseenter(function() { //...}
¿Tienes aquí las coordenadas o la ciudad para llevarlos al mapa? En tu enlace original, ahí llegaban las coordenadas y el texto que lo trasladaba a la derecha.

Resumiendo:
¿mapa.php?ciudad=... es la página que muestra el mapa?
xmlhttp.open("GET","mapa.php?ciudad="+str,true); ¿Qué valores recoge mapa.php?...? Porque me permito pensar que ahí han de ir las coordenadas expresadas como valores en las opciones del select, por lo que la estructura $("#locations li") no me sirve. Porque si en el listado tengo las coordenadas y el texto, ¿qué función tienen las opciones del select?
Y de todos modos será necesario recargar la página con los datos del GET (que se ejecutan en el servidor, es PHP)

Dicho de otra forma, si tienes un interés especial por recoger los datos mediante ajax, hacia una base de datos o un registro a ser usado posteriormente, bien, pero al mismno tiempo pásalos directamente hacia tu script del mapa.

Y recuerda que si el valor que envías es el nombre de la ciudad, tendrás que desarrollar geocoder
  #7 (permalink)  
Antiguo 03/05/2013, 15:55
Avatar de cuasatar  
Fecha de Ingreso: junio-2011
Ubicación: Bogotá Rock City
Mensajes: 1.230
Antigüedad: 12 años, 9 meses
Puntos: 181
Respuesta: ruta absoluta imagen marcador google maps

Respondo por partes:

Cita:
- Mediante el <select> llamas a la función mostrarMapas(this.value) ¿Y después de elegir la ciudad, en la función llamas a jquery y maps.google? Si de todas formas lo vas a necesitar, yo lo insertaría directamente en cabecera.

Tienes que llamarlo en la cabecera al inicio de los tiempos y luego en el llamado de ajax porque en la llamada asincrona jquery y maps google no existen para el script.

Cita:
- <div id="cont-map"> ¿Contiene algo, el valor del <select> o se inicia vacío? (<div id="cont-map"></div>)
Se carga vacio y al momento que seleccionas una ciudad se carga la lista el el div del mapa:(map-canvas). Igual me gustaria que por defecto se cargara con alguna ciudad pero los problemas de uno en uno

Cita:
Resumiendo:
¿mapa.php?ciudad=... es la página que muestra el mapa?
xmlhttp.open("GET","mapa.php?ciudad="+str,true); ¿Qué valores recoge mapa.php?...? Porque me permito pensar que ahí han de ir las coordenadas expresadas como valores en las opciones del select, por lo que la estructura $("#locations li") no me sirve. Porque si en el listado tengo las coordenadas y el texto, ¿qué función tienen las opciones del select?
Y de todos modos será necesario recargar la página con los datos del GET (que se ejecutan en el servidor, es PHP)
Crei que se veia muy claro en la función ajax, mapa.php toma la ciudad del select (pelotillehue,buenas peras, san guchito, etc) Ahi simplemente se lee la ciudad y tomo los datos de un xml, con eso genero el listado con los datos de latitud, longituy y otros tantos. El select permite escoger solo una ciudad y no traer todos los resultados.

Cita:
Y recuerda que si el valor que envías es el nombre de la ciudad, tendrás que desarrollar geocoder
Pues voy a echarle una ojeada aunque como tengo la idea inicialmente el nombre de la ciudad viene dentro del xml, de todas maneras mirare geocoder que nunca lo he usado.

En el blog que aparece abajo en mi firma lo tengo implementado, solamente que de momento no uso ajax y la ciudad se carga aleatoriamente. Me da igual que se use o no ajax, lo importante es que se vea el marcador y de momento esto es lo que he logrado pero no tengo control sobre la ciudad y si selecciono la ciudad no veo el marcador jajaja.

Nuevamente gracias por el tiempo, esto de google maps me parece muy chevere (molon).
__________________
Blog de humor http://elcuasatar.net63.net/

Última edición por cuasatar; 03/05/2013 a las 16:31
  #8 (permalink)  
Antiguo 03/05/2013, 17:51
txemaarbulo
Invitado
 
Mensajes: n/a
Puntos:
Respuesta: ruta absoluta imagen marcador google maps

cuasatar

No entendía la carga de jQuery y Google Maps en Ayax porque lo necesitas para tu javascript del mapa, y no para crear el XML (salvo la excepción del Ajax mediante jQuery que no es el caso)

Podríamos haber comenzado por el final: el enlace a tu mapa.
Por lo que veo, me parece que está muy logrado.

En mi modesta opinión, generar un xml sin otros fines, para mostrarlo en el mapa me parece un trabajo excesivo además de necesitar la recarga de página por mi como te decía anteriormente además de leerlo en tu código del mapa.

Por experiencia, te reitero que la ruta de tu marcador, si está en tu servidor puede ser perfectamente relativa.

Vaya como aporte una paginita que te puede ayudar con direcciones, geocoder y coordenadas Geocoder: Direcciones y Coordenadas

Ella te "traducirá" la dirección que pongas a la que entiende Google. Una anécdota: si pones "Campos Elíseos" puede llevarte a Sao Paulo (Brasil), Tepatitlán (México) o París, por lo que se ha de cuidar y comprobar el texto con lo que interprete Google.

Y Buenas noches.
Si queda algo pendiente lo retomamos mañana.

Etiquetas: ajax, funcion, google, maps, marcador, ruta, select
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 00:46.