Como estás cargando tu mapa de manera asíncrona le pones un callback en la url que no es más que una función que se ejecutará una vez que el mapa ha terminado de cargar
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFMa4pd7uMEU0NRi7dHS7YVBcFQvKG5Ow&signed_in=true&callback=initMap"></script>
Fíjate en esta parte de la url
signed_in=true&callback=initMap
En tu código la función initMap
está pero es muy probable que ese script no esté cargado aún. Según dices lo tienes en el header.php
por lo que debe estar cargando en el <head>
del documento. Mi recomendación es que muevas la función initMap
para el header también o que pongas el script que carga el google maps justo después del script que contiene la función initMap
.
Otra alternativa sería cargar el mapa de manera síncrona y usar la función domready de jquery para ejecutar el código una vez que haya cargado todo el documento.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFMa4pd7uMEU0NRi7dHS7YVBcFQvKG5Ow&signed_in=true"></script>
$(document).ready(function() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: {lat: -36.8308521, lng: -73.0582368}
});
<?php $markers1 = Marker::listMarkers(); ?>
<?php while (list(, $valor) = each($markers1)) {
echo " var marker = new google.maps.Marker({";
echo "position: {lat:" . $valor->getLat() . ",lng:" . $valor->getLng() . "},";
echo " title: '" . $valor->getUbicacion() . "',";
echo "map: map});";
}
?>
}
});