Skip to main content
agregado link a la doc
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

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 domreadydomready 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});";
    }
    ?>
}
});

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});";
    }
    ?>
}
});

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});";
    }
    ?>
}
});
Origen Enlace
devconcept
  • 12.8k
  • 3
  • 42
  • 57

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});";
    }
    ?>
}
});