ruta absoluta imagen marcador google maps

[cuasatar]

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:

var image = new google.maps.MarkerImage(
        'http://midireccion.com/imagenes/sprite.png'
        //'sprite.png'
        , new google.maps.Size(67,86)
        , new google.maps.Point(0,0)
        , new google.maps.Point(34,86)
        );
 

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.

[txemaarbulo]

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:

<ul id="locations">    
        <li data-geo-lat="41.9786" data-geo-long="-87.9047">
          <h3>O'Hare Airport</h3>
          <p>Flights n' stuff</p>
          <!-- ... -->
 

Después, en javascript

Código Javascript:

$("#locations li").mouseenter(function() {      
        $el = $(this);                
        if (!$el.hasClass("hover")) {        
          $("#locations li").removeClass("hover");
          $el.addClass("hover");        
          if (!first) {             
            // Clear current marker
            curMarker.setMap();             
            // Set zoom back to Chicago level
            // map.setZoom(10);
          }          
          // Move (pan) map to new location
          pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
          map.panTo(pointToMoveTo);
          // ...
 

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:

"... 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.

[cuasatar]

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.

[txemaarbulo]

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:

mifuncion(){
// el código de llamada, posición del marcador, nuevo zoom, centrado de mapa o lo que quiera hacer //
}
 

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.

[cuasatar]

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:

<select name="ciudades" onchange="mostrarMapas(this.value)">
                <option value="">Seleccione una ciudad:</option>
                   <option value="Ciudad 1">Ciudad 1</option>
                  <option value="Ciudad 2">Ciudad 2</option>
                  <option value="Ciudad 3">Ciudad 3</option>
</select>
<div id="cont-map"></div>
 

La parte ajax es muy sencilla tambien:

Código Javascript:

function jsDinamic(direccion,tipo){
  var g=document.createElement("script");
  g.src=direccion;
  g.type=tipo;
  document.body.appendChild(g);
  }
 
function mostrarMapas(str)
{
var xmlhttp;    
if (str=="")
  {
  document.getElementById(""cont-map").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      jsDinamic("https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js","text/javascript");
      jsDinamic("http://maps.google.com/maps/api/js?sensor=false&language=es","text/javascript");  
      jsDinamic("http://midireccion/mapasdinamicos.js","text/javascript"); 
      document.getElementById("cont-map").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","mapa.php?ciudad="+str,true);
xmlhttp.send();
}
 

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:

$(function() {
      //esto no importa que centro tenga porque al final en función de la ciudad cambia el centro, solo sirve para inicializar
      var chicago = new google.maps.LatLng(41.924832, -87.697456),
          pointToMoveTo, 
          first = true,
          curMarker = new google.maps.Marker({}),
          $el;
      
      var options = {
          zoom: 16,
          center: chicago,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      
      var map = new google.maps.Map($("#map_canvas")[0], options);
      var image = new google.maps.MarkerImage(
        'images/sprite.png'//aqui sospecho que es el error pero es una sospecha
        );
       
      $("#locations li").mouseenter(function() {
        $el = $(this);
        if (!$el.hasClass("hover")) {
        
          $("#locations li").removeClass("hover");
          $el.addClass("hover");
        
          if (!first) { 
            
            // Clear current marker
            curMarker.setMap(); 
                       
            // Set zoom back to Chicago level
            // map.setZoom(10);
          }
          
          // Move (pan) map to new location
          pointToMoveTo = new google.maps.LatLng($el.attr("data-geo-lat"), $el.attr("data-geo-long"));
          map.panTo(pointToMoveTo);
          
          // Add new marker
          curMarker = new google.maps.Marker({
              position: pointToMoveTo
               , title: $el.attr("data-marcador")
              ,map: map
              ,icon: image
           });
          
          // On click, zoom map
          google.maps.event.addListener(curMarker, 'click', function (e) {
             map.setZoom(14);
          });
          
          first = false; 
        }
        
      });
      
      $("#locations li:first").trigger("mouseenter");
    });
 

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.

[txemaarbulo]

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:

$("#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

[cuasatar]

Respondo por partes:

- 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.

- <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

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.

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).

[txemaarbulo]

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.