Problems using the Googlemaps.Locationservices API on ASPNET MVC

Asked

Viewed 51 times

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.

BUG

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">&times;</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.

  • 3

    The error shown in the figure is that the value is not a number. Try changing the decimal point of latitude by a point.

  • Thank you Andre Mesquita, I am already evaluating the issue, I will return soon.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.