2

Estoy intentando colocar múltiples marcadores en un mapa mediante la API de Google Maps.

Los valores de latitud y longitud para colocar los marcadores los tomo de la tabla usuarios de mi base de datos de mysql.

El problema es que el mapa no se ejecuta aunque todas las variables extraidas de la base de datos esten definidas correctamente y con datos correctos en ellas.

También he podido observar que al ejecutar codigo php dentro del script de javascript suele dar problemas.

¿Alguna idea de como solucionarlo?

Objetivo: Colocar multiples marcadores en un mapa de Google Maps mediante la API

¿Cómo?: Tomando datos de una base de datos MySql mediante PHP utilizando PDO

Situación Actual: Todas las variables sacadas de la base de datos estan definidas

El mapa de Google Maps no se ejecuta

Código:

<script src="https://maps.googleapis.com/maps/api/js?key=#############&libraries=places" async defer></script>
<script>
    alert("se ejecuta");
    <?php $cont = 1; ?>
    var locations = [<?php foreach($busqueda as $usuario) {
                          if($cont < $cantidadUsuarios){
                            echo '['.$usuario['direccion'].','.$usuario['latitud'].','.$usuario['longitud'].'],';
                            $cont++;
                          }else if($cont == $cantidadUsuarios){
                            echo '['.$usuario['direccion'].','.$usuario['latitud'].','.$usuario['longitud'].']';
                          }
                        }
                     ?>];
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(<?php echo $row1['latitud']; ?>, <?php echo $row1['longitud']; ?>),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    var infowindow = new google.maps.InfoWindow();
    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
    alert("se ejecuta");
</script>
<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 275px;
    width: 100%;
  }
</style>
<body>
  <div id="map">Cargando Mapa...</div>
</body>

1 respuesta 1

2

Sencillamente tu codigo JS se ejecuta antes que cargue el body. Tu código esta bien. Proba este orden

<style>
  /* Always set the map height explicitly to define the size of the div
   * element that contains the map. */
  #map {
    height: 275px;
    width: 100%;
  }
</style>
<body>
  <div id="map"></div>
    <script type="text/javascript">
     .
     .
     .
    </script>
</body>
3
  • Acabo de cambiar el orden del código y sigue sin funcionar
    – UnaiLopez
    Commented el 7 jun. 2019 a las 18:31
  • 1
    Puedes mostrar el mansaje de error ? Commented el 7 jun. 2019 a las 18:34
  • Me aparecio esto en el depurador: var locations = [<br /> <b>Notice</b>: Undefined variable: busqueda in <b>C:\xampp\htdocs\carepets\usuario\busqueda\buscarMapa.php</b> on line <b>111</b><br /> <br /> <b>Warning</b>: Invalid argument supplied for foreach() in <b>C:\xampp\htdocs\carepets\usuario\busqueda\buscarMapa.php</b> on line <b>111</b><br /> ];
    – UnaiLopez
    Commented el 7 jun. 2019 a las 18:37

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.