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ón</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Fecha</th>
<th>Vendedor</th>
<th>Ubicació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>