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>