5

Saludos de nuevo. He estado intentando cargar un mapa a través de Google Maps y sencillamente no me muestra. Ejecuto la consola y me sale el siguiente mensaje:

Uncaught InvalidValueError: initMap is not a function

Les dejo el código que estoy ocupando:

Mapa.php

<div id="map"></div>
<br>
<div>
    <table id="markers_table" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
        <tr>
            <th>Fecha</th>
            <th>Vendedor</th>
            <th>Ubicaci&oacute;n</th>
        </tr>
        </thead>
        <tfoot>
        <tr>
            <th>Fecha</th>
            <th>Vendedor</th>
            <th>Ubicaci&oacute;n</th>
        </tfoot>
        <tbody>

        <?php $markers = Marker::listMarkers(); ?>
        <?php
        while (list(, $valor) = each($markers)) {
            echo " <tr>";
            echo "<td>" . $valor->getFecha(). "</td>";
            echo "<td>" . $valor->getVendedor() . "</td>";
            echo "<td>" . $valor->getUbicacion() . "</td>";
            echo " </tr>";
        }
        ?>
        </tbody>
    </table>
</div>
<script type="text/javascript">
    function initMap() {
        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});";
    }
        ?>
    }
    $(document).ready(function() {
        $.extend($.fn.dataTable.defaults, {
            searching: false,
            ordering: false
        });
        $('#markers_table').DataTable({
            ordering: true,
            paging: false,
            "processing": true
        });
    });

</script>

Marker.php

class Marker
{
    private $fecha;
    private $vendedor;
    private $ubicacion;
    private $lat;
    private $lng;

    /**
     * Marker constructor.
     */
    public function __construct()
    {
    }


    /**
     * @return array
     */
    public static function listMarkers()
    {
        $markerList = array();
        try {
            $sql = ("select FormularioVenta_fecha as Fecha,
                    Vendedor_nombre as Vendedor,
                    ubicacion as Ubicacion,
                    FormularioVenta.FormularioVenta_gps as latlng
                    from FormularioVenta
                    left join Agricultor on FormularioVenta.Agricultor_id = Agricultor.Agricultor_id
                    left join Vendedor on Vendedor_id=FormularioVenta.FormularioVenta_usuario");
            $conn = connectDB();
            $result = query($conn,$sql);


            while ($row = mssql_fetch_array($result)) {
                $marker = new Marker();
                $date = date_format(new DateTime($row['Fecha']), 'd-m-y');
                $locations = explode(',', $row['latlng']);
                $marker->setFecha($date);
                $marker->setVendedor($row['Vendedor']);
                $marker->setUbicacion($row['Ubicacion']);
                $marker->setLat(trim($locations[0]));
                $marker->setLng(trim($locations[1]));
                array_push($markerList, $marker);
            }

            return ($markerList);
        } catch (Exception $e) {
            die(print_r(json_encode(), true));
        }
    }

    /**
     * @return mixed
     */
    public function getFecha()
    {
        return $this->fecha;
    }

    /**
     * @param mixed $fecha
     */
    public function setFecha($fecha)
    {
        $this->fecha = $fecha;
    }

    /**
     * @return mixed
     */
    public function getVendedor()
    {
        return $this->vendedor;
    }

    /**
     * @param mixed $vendedor
     */
    public function setVendedor($vendedor)
    {
        $this->vendedor = $vendedor;
    }

    /**
     * @return mixed
     */
    public function getUbicacion()
    {
        return $this->ubicacion;
    }

    /**
     * @param mixed $ubicacion
     */
    public function setUbicacion($ubicacion)
    {
        $this->ubicacion = $ubicacion;
    }

    /**
     * @return mixed
     */
    public function getLat()
    {
        return $this->lat;
    }

    /**
     * @param mixed $lat
     */
    public function setLat($lat)
    {
        $this->lat = $lat;
    }

    /**
     * @return mixed
     */
    public function getLng()
    {
        return $this->lng;
    }

    /**
     * @param mixed $lng
     */
    public function setLng($lng)
    {
        $this->lng = $lng;
    }


}

Llamada a la API de Google en Header.php

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFMa4pd7uMEU0NRi7dHS7YVBcFQvKG5Ow&signed_in=true&callback=initMap"></script>

1 respuesta 1

1

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});";
    }
    ?>
}
});
4
  • Gracias, hice lo primero que me dijiste pero ahora me dio otro error. Me sale el siguiente mensaje: "Failed to load resource: the server responded with a status of 500 (Internal Server Error)" Commented el 23 may. 2016 a las 16:50
  • mmm. Prueba a mover el script de google maps para el final de la página justo antes de cerrar la etiqueta </body>. Como no tengo más información del error que te sale no te puedo decir con seguridad cual es la causa.
    – devconcept
    Commented el 23 may. 2016 a las 17:06
  • Pues ahora me he estado fijando que a lo mejor estoy enviando un dato mal. Hice todo lo que me dijiste que hiciera y nada. Estoy usando una base de datos SQL Server y el servidor que estoy ocupando solo permite el driver mssql. Commented el 23 may. 2016 a las 21:04
  • @RobertoCaamañoRiquelme Es lo que me hace pensar que el problema que tienes ahora no tiene que ver ya con la pregunta sino con algún otro problema de configuración de tu aplicación pues ya el error que pusiste al principio no te está saliendo más.
    – devconcept
    Commented el 24 may. 2016 a las 13:57

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.