Hi, I have a project in asp.net mvc which brings some coordinates of the database and should show the markers on a map, but it does not. Here I leave the code and the result in the browser console.
@model Models.VerRutaModel
<style type="text/css">
#map {
height: 100%;
}
</style>
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close fa fa-close" data-dismiss="modal" aria-hidden="true"></button>
<h4 class="modal-title" id="VerRutaModal">Ruta </h4>
</div>
<div class="modal-body" style="height: 400px;">
<div id="map"></div>
</div>
<div class="modal-footer text-right">
<button type="button" class="btn btn-primary" data-dismiss="modal">Aceptar</button>
</div>
</div>
</div>
<script type="text/javascript">
var locations = [],
center = new google.maps.LatLng(10, 20);
function initialize() {
@foreach (RutaRastreo ruta in Model.RutaRastreo)
{
if (ruta.Gps_Latitud != 0 && ruta.Gps_Longitud != 0)
{
@:locations.push([@ruta.Gps_Latitud, @ruta.Gps_Longitud]);
}
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: center,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker,
i,
position,
bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
position = new google.maps.LatLng(locations[i][1], locations[i][2]);
marker = new google.maps.Marker({
position: position,
map: map
});
bounds.extend(position); // añado la posición a bounds
console.log(position);
google.maps.event.addListener(
marker,
"click",
(function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
};
})(marker, i)
);
}
map.fitBounds(bounds);
}
initialize();
</script>
}
}
Use estos dos metodos para eliminar las "," en las coordendas, pero el resultado fue el mismo
locations = locations.map((elemento) => {
return [
elemento[0],
Number(elemento[1] + '.' + elemento[2]),
Number(elemento[3] + '.' + elemento[4])
];
});
O bien, en ES5
locations = locations.map(function(elemento) {
return [
elemento[0],
Number(elemento[1] + '.' + elemento[2]),
Number(elemento[3] + '.' + elemento[4])
];
});