Problema con la api de google maps

[SirZoX]

Buenas tardes a todos.

Llevo un buen rato peleando con esto y no consigo darle una solución, a ver si alguien ve el fallo.


Para ponernos en situación, tengo una página en php y a mitad de página hago un include de otro php que ejecuta un bucle y genera, por cada ubicación de en la base de datos, lo siguiente:

Código:

var marker<?php echo $x; ?> = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $point->coordenadas; ?>),
        map:map2
      });

El objetivo es simple, genera marker1, marker2... La coña es que no me muestra los markers.
No sé si tiene algo que ver que antes de llegar a ejecutarse esto, se ejecuta otro script js que geolocaliza al usuario en el mapa.

El script completo es este

Código:

<script>

    var map2 = document.getElementById('map'); <?php

    $x = 0;
    while ($point = mysql_fetch_object($c)) {

      $x++; ?>

      var marker<?php echo $x; ?> = new google.maps.Marker({
        position: new google.maps.LatLng(<?php echo $point->coordenadas; ?>),
        map:map2
      });<?php
    } ?>

</script>

En este caso la variable map2 la llamé así por si el problema venía por la primera variable "map" que se ejecuta en el script anterior.

En fin.. que no sé por donde cogerlo ya, y estoy seguro que debe ser una bobada, pero no doy con ella :(

[txemaarbulo]

Hola SirZoX:

Te sugiero que definas la imagen.

A modo de ejemplo:

Código Javascript:

var imagen = new google.maps.MarkerImage('rutaimagen/' + icoimagen, new google.maps.Size(38, 38), new google.maps.Point(0, 0), new google.maps.Point(19, 38), new google.maps.Size(38, 38)); /*Esto corresponde a un marcador de 38x38px entrado a la mitad, abajo */
var marker = new google.maps.Marker({
    position: latlng,
    map: map,
    title: usuario,  /* Opcional (usuario está definido previamente) */
   icon: imagen
});
 

Si observas, defino icon: imagen

Aparte de ello, personalmente (creo que tengo derecho a tener manías y por algo será), los valores PHP generalmente los recojo en campos ocultos en HTML para después recogerlos en el Javascript correspondiente. Ejemplo:

Código HTML:

<input type="hidden" id="icoimagen" name="icoimagen" value="<?php echo $_SESSION['icoimagen']; ?>" >
 

Que se traduce en el Javascript en

Código Javascript:

var icoimagen = document.getElementById("icoimagen").value;
var imagen = new google.maps.MarkerImage('tutaimagen/' + icoimagen, new google.maps.Size(38, 38), new google.maps.Point(0, 0), new google.maps.Point(19, 38), new google.maps.Size(38, 38));
 

(Aclaro el código superior)

[SirZoX]

Gracias txemaarbulo.

Pero todo el código que me has puesto, corrígeme si me equivoco (entiendo poco de js), pero únicamente lo que hace es que el icono por defecto, lo sustituirá por otra imagen no?

En cuanto al tema de los datos desde php, muchas veces yo también recupero los datos desde inputs hidden, pero en este caso, tengo que sacar las coordenadas desde una base de datos y con un bucle me parece más óptimo que volcar la info directamente en un input para luego recuperarla no?

Creo que el problema no viene por la imagen sino más bien por alguna otra cosa.

A ver si algo más de código ayuda a ver dónde está el problema.


funcion localize();

Código:

  var latitud = pos.coords.latitude;
  var longitud = pos.coords.longitude;
  var precision = pos.coords.accuracy;

  var contenedor = document.getElementById("map")

  var centro = new google.maps.LatLng(latitud,longitud);


  var propiedades =
  {
      zoom: 7,
      center: centro,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(contenedor, propiedades);


      var marcador = new google.maps.Marker({
      position: centro,
      map: map
  });

Prueba 1. No muestra el marker1, pero la función localize() funciona bien. Y no tiene imagen ni nada raro, debería mostrar el punto rojo por defecto.

Código:

<script> 
localize(); 
        var pos1 = new google.maps.LatLng(38.675921, -0.210401);
        var marker1 = new google.maps.Marker({
           position: pos1 ,
           map:map
        });     
</script>

Prueba 2. Copio el contenido del <script> excepto la llamada a localize(), y lo pego dentro del código de la propia funcion localize(), quedando así.

Código:

  var latitud = pos.coords.latitude;
  var longitud = pos.coords.longitude;
  var precision = pos.coords.accuracy;

  var contenedor = document.getElementById("map")

  var centro = new google.maps.LatLng(latitud,longitud);

  var propiedades =
  {
      zoom: 7,
      center: centro,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(contenedor, propiedades);

  var marcador = new google.maps.Marker({
      position: centro,
      map: map
  });


   /* añadido manualmente */
        var pos1 = new google.maps.LatLng(38.675921, -0.210401);
        var marker1 = new google.maps.Marker({
           position: pos1 ,
           map:map
        });

Y en este caso, tócate las narices, sí que muestra los dos puntos en el mapa.
Podría hacerse con ajax? sí, seguro que puedo hacer una llamada a un php que me retorne el array de datos de la consulta SQL y con js hacer el bucle que necesito y generar todas las posX, posY...posN y markerX, markerY... markerN para que el mapa las muestre desde dentro de la propia funcion localize(), pero 1: no sé ajax, y 2: quisiera entender porqué tal como lo estoy haciendo ahora no funciona XD

[txemaarbulo]

Sin ver todo el código (suele ser necesario para dar un diagnóstico) creo que en la primera prueba puede fallar algo que tiene que ver con variables globales y locales.

En la segunda prueba, las variables están dentro del mismo ámbito (que no puedo definir si son globales o locales).

En ninguno de ambos casos veo la llamada a la función localize().

(Es tan difícil ver la razón de su comportamiento como el pedirle a un especialista un diagnóstico médico vía telefónica sin analítica ni auscultación).

En la segunda parte de tu pregunta:
Sí podría hacerse con ajax (sería la mejor opción).

Explicar cómo hacerlo es un poco más complejo ya que:
1.- Hay que recoger los datos de la BBDD con un JSON.
2.- Hay que recorrer el mismo mediante la función $.getJSON('archivo_creado.json', function(data) { /* ... */ })

En este caso, estamos con JQUERY y el necesario for (var i = 0; i < data.length; i++) { /* ... */ } recorriéndolo y lanzando los marcadores.

Hay otras soluciones libres de JQUERY pero considero que sería complicar la explicación de cómo hacerlo.