Javascript: initMap is not a function

2

Greetings again. I've been trying to load a map through Google Maps and it just does not show me. I run the console and I get the following message:

Uncaught InvalidValueError: initMap is not a function

I leave the code I'm occupying:

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;
    }


}

Call the Google API on Header.php

<script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCFMa4pd7uMEU0NRi7dHS7YVBcFQvKG5Ow&signed_in=true&callback=initMap"></script>
    
asked by Roberto Caamaño Riquelme 23.05.2016 в 17:02
source

1 answer

0

As you are loading your map asynchronously you put a callback in the url that is nothing more than a function that will run once the map has finished loading

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

Look at this part of the url

signed_in=true&callback=initMap

In your code the initMap function is but it is very likely that that script is not loaded yet. As you say you have it in the header.php so it must be loading in the <head> of the document. My recommendation is that you move the function initMap for the header also or that you put the script that loads the google maps just after the script that contains the function initMap .

Another alternative would be to load the map synchronously and use the domready function of jquery to run the code once you have loaded the entire document.

<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});";
    }
    ?>
}
});
    
answered by 23.05.2016 в 17:25