0
I’m working on a development that plots multiple longitude and latitude locations coming from the SQL SERVER database that load onto a map after typing some search data. Below is the screen with the problem that does not load my Google map, I am using the API Googlemaps.Locationservice.
My initMap() function is giving Bug, I already switched the API key to make sure it could be that, but it wasn’t the problem.
The files I’m working on are:
Tracker report.Cs
public class RastreadorRelatorio
{
public string PrefixoRastreador { get; set; }
public string OPM { get; set; }
public string PrefixoViatura { get; set; }
public string Placa { get; set; }
public string Ignicao { get; set; }
public string Latitude { get; set; }
public string Longitude { get; set; }
public DateTime DataHora { get; set; }
public string PosicaoGPS { get; set; }
}
Reportariocontroller.Cs
private string MontarInformacoesManutencao(RelatorioViewModel relatorio)
{
if (relatorio.situacao == "7")
{
string opm = "";
string placa = "";
string prefixoViatura = "";
string prefixoRastreador = "";
if (!string.IsNullOrEmpty(relatorio.opm))
{
opm = relatorio.opm;
}
if (!string.IsNullOrEmpty(relatorio.placa))
{
placa = relatorio.placa;
}
if (!string.IsNullOrEmpty(relatorio.prefixoViatura))
{
prefixoViatura = relatorio.prefixoViatura;
}
if (!string.IsNullOrEmpty(relatorio.prefixoRastreador))
{
prefixoRastreador = relatorio.prefixoRastreador;
}
var viaturas = rastreadorDezRepository.GetLstRastreador(Convert.ToInt16(relatorio.situacao), opm, placa, prefixoViatura, prefixoRastreador, relatorio.dtaInicio, relatorio.dtaFim);
string titulo = MontarTituloRelatorio(relatorio.situacao);
html += "<tr><td valign=\"top\" colspan=\"12\"><b> " + titulo
+ "</b></td></tr><br/><tr><td colspan=\"12\" class=\"first\"><table class=\"list-table\">";
var numEvento = 0;
List<RastreadorRelatorio> ListarLatLong = new List<RastreadorRelatorio>();
foreach (var item in viaturas)
{
var ignicao = "";
if (item.Ignicao == "L")
{
ignicao = "Ligado";
}
else
{
ignicao = "Desligado";
}
string Mapear = item.Latitude.ToString() + " " + item.Longitude.ToString();
RastreadorRelatorio PlotarLatLong = new RastreadorRelatorio();
PlotarLatLong.PrefixoViatura = Mapear;
var locationService = new GoogleLocationService();
var point = locationService.GetLatLongFromAddress(Mapear);
PlotarLatLong.Latitude = point.Latitude.ToString();
PlotarLatLong.Latitude = point.Latitude.ToString();
ListarLatLong.Add(PlotarLatLong);
numEvento += 1;
html += "<tr>";
html += "<td valign=\"top\" colspan='12'><b>Número Rastreador </b> " + item.PrefixoRastreador + "</td>";
html += "<td valign=\"top\" colspan='12'><b>OPM </b> " + item.OPM + "</td>";
html += "<td valign=\"top\" colspan='12'><b>Prefixo Viatura </b> " + item.PrefixoViatura + "</td>";
html += "<td valign=\"top\" colspan='12'><b>Placa </b> " + item.Placa + "</td>";
html += "<td valign=\"top\" colspan='12'><b>Ignição </b> " + ignicao + "</td>";
html += "<td valign=\"top\" colspan='12'><b>Latitude </b> " + item.Latitude + "</td>";
html += "<td valign=\"top\" colspan='12'><b>Longitude </b> " + item.Longitude + "</td>";
html += "</tr>";
html += "<tr>";
}
html += "</tr>";
html += "</table></td></tr>";
retorno += html;
string jsonString = JsonSerializer<List<RastreadorRelatorio>>(ListarLatLong);
RegisterArrayDeclaration(jsonString);
RegisterStartupScript(GetType(), Guid.NewGuid().ToString(), "initMap();", true);
}
}List.cshtml
<script src="https://maps.googleapis.com/maps/api/js?key=Minhachave" async defer></script>
<script src="~/@Fingerprint.Tag("/Scripts/Relatorio/Listar.js")"></script>
@{
var situacoes = ViewBag.Situacoes as Dictionary<int, string>;
}
<div class="menu-float">
<div class="wrapper-breadcrumb">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-6">
<h3 class="content-title-text font-blue font-montserrat">Relatório</h3>
</div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-12">
<div class="content-breadcrumb pull-right hidden-xs">
<p class="font-14px font-steel">
<a href="~/Home/Index" title="Início" class="font-blue">
Início
</a>
/ Relatório
</p>
</div>
</div>
</div>
</div>
<div id="div-mensagem" class="alert hidden">
<button type="button" class="close"><span aria-hidden="true">×</span></button>
<label></label>
</div>
<div class="alert alert-warning alert-area collapse" id="confirmacao-container" aria-expanded="true">
<div class="alert-text">
<p class="mensagem"></p>
</div>
<form class="form-inline">
<div id="decisao" class="decisao">
<input type="button" class="modal-button modal-button-optsim sim" value="Sim" />
<input type="button" class="modal-button modal-button-optnao nao" data-toggle="collapse" data-target="#collapseExample" value="Não" />
</div>
</form>
</div>
</div>
<div class="wrapper-content conteudo conteudo-tabela">
<div class="row">
<div class="col-lg-12">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
Viaturas
</h4>
</div>
<div id="collapse1">
<div class="panel-body">
<div>
<div class="form-group col-sm-4 col-md-2 col-lg-2">
<label class="label-title">OPM:</label>
<input type="text" class="form-control" id="opm" />
</div>
<div class="form-group col-sm-4 col-md-2 col-lg-2">
<label class="label-title">Placa:</label>
<input type="text" class="form-control" id="placa" />
</div>
<div class="form-group col-sm-4 col-md-2 col-lg-2">
<label class="label-title">Prefixo da viatura:</label>
<input type="text" class="form-control" id="prefixoViatura" />
</div>
<div class="form-group col-sm-4 col-md-2 col-lg-2">
<label class="label-title">Nº do Rastreador:</label>
<input type="text" class="form-control" id="prefixoRastreador" />
</div>
</div>
<div class="clearfix">
<div class="col-md-2 col-lg-2 form-group">
<label for="periodoInicial" class="label-title"> Periodo De </label>
<input type="text" id="periodoInicial" class="form-control data-picker-range-start">
</div>
<div class="col-md-2 col-lg-2 form-group">
<label for="periodoFinal" class="label-title"> Até </label>
<input type="text" id="periodoFinal" class="form-control data-picker-range-end">
</div>
</div>
<div>
@foreach (var situacao in situacoes)
{
<label for="[email protected]" class="marginone label-title">
<input name="situacao" data="@situacao.Key" type="radio" id="[email protected]" value="@situacao.Key" class="marginone situacao" @(situacao.Key == 1 ? "checked" : "")>
@situacao.Value
</label>
}
</div>
<br />
<div class="btn" style="color: white;">
<button class="btn back-azul acao-consultar " id="btnConsultar">Consultar</button>
</div>
<table id="tbViatura"
class="dataTable no-footer responsive table table-striped table-bordered nowrap"
cellspacing="0"
width="100%"
role="grid"
aria-describedby="example_info"></table>
<div id="map_canvas" style="width: 100 %; height: 100rem "></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Listar.js
var table;
var dataTableData = undefined;
$(function () {
$(".btnPdf").on("click", function () {
consultarImpressao();
return false;
});
function consultarImpressao() {
var opm = "";
var placa = "";
var prefixoViatura = "";
var prefixoRastreador = "";
var dataInicio = "";
var dataFinal = "";
var temParametro = false;
var temData = false;
var situacao = $(".situacao:checked").val();
if ($("#opm").val()) {
opm = $("#opm").val();
temParametro = true;
}
if ($("#placa").val()) {
placa = $("#placa").val();
temParametro = true;
}
if ($("#prefixoViatura").val()) {
prefixoViatura = $("#prefixoViatura").val();
temParametro = true;
}
if ($("#prefixoRastreador").val()) {
prefixoRastreador = $("#prefixoRastreador").val();
temParametro = true;
}
if ($("#periodoInicial").val()) {
dataInicio = formatarDataPadrao($("#periodoInicial").val().trim());
}
if ($("#periodoFinal").val()) {
dataFinal = formatarDataPadrao($("#periodoFinal").val().trim());
}
if (!temParametro) {
montaMensagemErro("Selecione pelo menos um parâmetro e a data inicial e final.");
return;
}
var ResumoPrint = {
situacao: situacao,
opm: opm,
placa: placa,
prefixoViatura: prefixoViatura,
prefixoRastreador: prefixoRastreador,
dtaInicio: converterDateTimeParaDisplay(new Date(dataInicio)),
dtaFim: converterDateTimeParaDisplay(new Date(dataFinal))
};
if (ResumoPrint != null) {
gerarImpressao(ResumoPrint);
}
else {
montaMensagemErro("Seu PDF não pôde ser gerado. Tente novamente mais tarde.");
$(".loading").addClass("collapse");
}
}
function gerarImpressao(ResumoPrint) {
var callBackOk = function (ret) {
if (ret) {
window.open("AbrirPDF", "_blank");
}
};
chamadaAjax("GerarImpressao", ResumoPrint, "POST", callBackOk);
}
$("#loading-table").hide();
jQuery.datetimepicker.setLocale('pt-BR');
$('.data-picker-range-start').datetimepicker({
format: 'd/m/Y',
onShow: function (ct) {
this.setOptions({
maxDate: $('.data-picker-range-end').val() ? $('.data-picker-range-end').datetimepicker('getValue') : new Date()
//maxDate: new Date()
})
},
timepicker: false
});
$('.data-picker-range-end').datetimepicker({
format: 'd/m/Y',
onShow: function (ct) {
this.setOptions({
minDate: $('.data-picker-range-start').val() ? $('.data-picker-range-start').datetimepicker('getValue') : false,
maxDate: new Date()
})
},
timepicker: false
});
$("#opm").on("keypress", function (event) {
Numerico(event);
})
$("#btnConsultar").on("click", function () {
GetViaturas();
})
});
function GetViaturas() {
var opm = "";
var placa = "";
var prefixoViatura = "";
var prefixoRastreador = "";
var dataInicio = "";
var dataFinal = "";
var temParametro = false;
var temData = false;
var situacao = $(".situacao:checked").val();
if ($("#opm").val()) {
opm = $("#opm").val();
temParametro = true;
}
if ($("#placa").val()) {
placa = $("#placa").val();
temParametro = true;
}
if ($("#prefixoViatura").val()) {
prefixoViatura = $("#prefixoViatura").val();
temParametro = true;
}
if ($("#prefixoRastreador").val()) {
prefixoRastreador = $("#prefixoRastreador").val();
temParametro = true;
}
if (!temParametro) {
montaMensagemErro("Selecione pelo menos um parâmetro e a data inicial e final.");
return;
}
if ($("#periodoInicial").val()) {
dataInicio = formatarDataPadrao($("#periodoInicial").val().trim());
}
else {
montaMensagemErro(Mensagens.Util.DataInicialObrigatoria);
return;
}
if ($("#periodoFinal").val()) {
dataFinal = formatarDataPadrao($("#periodoFinal").val().trim());
}
else {
montaMensagemErro(Mensagens.Util.DataFinalObrigatoria);
return;
}
if (!dataInicialMenorQueFinal(dataInicio, dataFinal)) {
montaMensagemErro(Mensagens.Util.DataInicialMaiorQueFinal);
return;
}
var diferencaDias = retornarDiferencaEmDiasEntreDatas(new Date(dataInicio), new Date(dataFinal));
if (diferencaDias > 5) {
montaMensagemErro("Diferença de dias entre a data inicial e final não deve ser maior do que 5 dias.");
return;
}
if (situacao == "7") {
if (placa == '' && prefixoRastreador == '' && prefixoViatura == '') {
montaMensagemErro("É obrigatório o preenchimento da Placa ou número do Rastreador ou Prefixo da Viatura.");
return;
}
}
var callBackOk = function (ret) {
dataTableData = ret;
if (!table) {
if (situacao === "6") {
$('.loading').removeClass('collapse');
table = montarDataTable();
table.column(0).visible(false);
table.column(1).visible(false);
table.column(2).visible(false);
table.column(3).visible(false);
table.column(4).visible(false);
table.column(5).visible(false);
table.column(6).visible(false);
table.column(7).visible(false);
table.column(8).visible(true);
table.column(9).visible(true);
table.column(10).visible(true);
table.column(11).visible(true);
table.column(12).visible(true);
table.column(13).visible(true);
table.column(14).visible(true);
table.column(15).visible(true);
table.column(16).visible(true);
$("#loading-table").hide();
}
else {
$('.loading').removeClass('collapse');
table = montarDataTable();
table.column(0).visible(true);
table.column(1).visible(true);
table.column(2).visible(true);
table.column(3).visible(true);
table.column(4).visible(true);
table.column(5).visible(true);
table.column(6).visible(true);
table.column(7).visible(false);
table.column(8).visible(false);
table.column(9).visible(false);
table.column(10).visible(false);
table.column(11).visible(false);
table.column(12).visible(false);
table.column(13).visible(false);
table.column(14).visible(false);
table.column(15).visible(false);
table.column(16).visible(false);
$("#loading-table").hide();
}
}
else {
if (situacao === "6") {
table.column(0).visible(false);
table.column(1).visible(false);
table.column(2).visible(false);
table.column(3).visible(false);
table.column(4).visible(false);
table.column(5).visible(false);
table.column(6).visible(false);
table.column(7).visible(false);
table.column(8).visible(true);
table.column(9).visible(true);
table.column(10).visible(true);
table.column(11).visible(true);
table.column(12).visible(true);
table.column(13).visible(true);
table.column(14).visible(true);
table.column(15).visible(true);
table.column(16).visible(true);
}
else {
table.column(0).visible(true);
table.column(1).visible(true);
table.column(2).visible(true);
table.column(3).visible(true);
table.column(4).visible(true);
table.column(5).visible(true);
table.column(6).visible(true);
table.column(7).visible(false);
table.column(8).visible(false);
table.column(9).visible(false);
table.column(10).visible(false);
table.column(11).visible(false);
table.column(12).visible(false);
table.column(13).visible(false);
table.column(14).visible(false);
table.column(15).visible(false);
table.column(16).visible(false);
}
$('.loading').removeClass('collapse');
table.clear();
table.rows.add(dataTableData);
table.draw();
//var $rowFilterHead = $('#tbViatura thead tr');
//$rowFilterHead.find('th').each(function () {
// var titulo = $(this).text();
// $(this).append('<br /><input type="text" placeholder="Pesquisar ' + titulo + '" />');
// $(this).find("input").width("70%");
//});
};
};
chamadaAjax("ListarViaturas", {
situacao: situacao, opm: opm, placa: placa, prefixoViatura: prefixoViatura,
prefixoRastreador: prefixoRastreador,
dtaInicio: converterDateTimeParaDisplay(new Date(dataInicio)), dtaFim: converterDateTimeParaDisplay(new Date(dataFinal))
}, "POST", callBackOk, undefined);
initMap();
}
// ***** FUNCIONALIDADES DO MAPA ****** //
var map;
// Função para settar as configurações iniciais do mapa e inicializá-lo
function initMap() {
alert("Chegou no initMap");
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: { markers: parseFloat([0][0].Latitude), markers: parseFloat([0][0].Longitude) },
zoom: 10
});
var geocoder = new google.maps.Geocoder;
var infowindow = new google.maps.InfoWindow;
window.onload = function () {
GetLatitudeLongitude(Latitude, Longitude);
};
//abobrinha('-23.533773', '-46.625290');
//abobrinha('-23.433773', '-46.425290');
//abobrinha('-23.233773', '-46.225290');
}
// Função para começar o mapa
function GetLatitudeLongitude(Latitude, Longitude) {
for (var i = 0; i < markers[0].length; i++) {
var data = markers[0][i];
var point = new google.maps.Marker({
position: { Latitude: parseFloat(data.Latitude), Longitude: parseFloat(data.Longitude) },
map: map,
draggable: false,
});
(function (point, data) {
google.maps.event.addListener(point, "click", function (e) {
infowindow.setContent(data.PrefixoViatura);
infowindow.open(map, point);
});
})(point, data);
point.addListener('click', function () {
alert("Clicou Aqui!");
});
}
}The focus of the error would be Invalidvalueerror: Setcenter: js:key=Minhachave:51 not a Latlng or Latlngliteral: in Property lat: not a number in the file Listar.js na Function initMap, I would like help from you friends, thanks.
The error shown in the figure is that the value is not a number. Try changing the decimal point of latitude by a point.
– Andre Mesquita
Thank you Andre Mesquita, I am already evaluating the issue, I will return soon.
– Leandro Azevedo