Problema com Latitude e Longitude usando google maps no site

Boa tarde Felipe! Tudo jóia ?

Então, pelo código fornecido, o problema provavelmente está relacionado à forma como você está passando a latitude e a longitude do envio para o JavaScript no seu template Django.

Ao usar parseFloat('{{envio.latitude}}') e parseFloat('{{envio.longitude}}'), você está passando as coordenadas como strings para o JavaScript, e isso pode causar problemas de precisão ou interpretação.

Para garantir que as coordenadas sejam tratadas corretamente, você pode usar a tag json_script do Django para codificar as coordenadas em um objeto JSON e, em seguida, recuperá-las no JavaScript.

Aqui está como você pode fazer isso:

{% block content %}
  {# ... código anterior ... #}

  {# Codifique as coordenadas como um objeto JSON dentro de uma tag <script> #}
  <script>
    var coordinates = JSON.parse('{{ envio|json_script:"envio" }}');
    var latitude = parseFloat(coordinates.latitude);
    var longitude = parseFloat(coordinates.longitude);

    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: latitude, lng: longitude },
        zoom: 15
      });

      var marker = new google.maps.Marker({
        position: { lat: latitude, lng: longitude },
        map: map,
        title: 'Local do Envio'
      });
    }
  </script>

  {# ... código restante ... #}
{% endblock %}

Essa abordagem usa a tag json_script do Django para codificar o objeto envio como um objeto JSON dentro de uma tag <script>. Em seguida, no JavaScript, usamos JSON.parse() para obter as coordenadas como valores numéricos.

Com essa abordagem, as coordenadas devem ser passadas corretamente para o JavaScript, e o mapa do Google Maps deve exibir a localização correta do envio. Certifique-se de verificar se as coordenadas armazenadas no banco de dados estão corretas e no formato esperado pelo Google Maps API.

Espero ter ajudado, Atenciosamente.

Cara, estou recebendo o erro "Object of type Envio is not JSON serializable" quando entro na página de analisar o envio. Vale lembrar que os dados de latitude e longitude são guardados como float e não como strings no banco de dados, tem alguma outra solução que você poderia me ajudar?

Fiz algumas mudanças e verifiquei que no meu banco de dados em mongoDB os valores de latitude e longitude são armazenados como float, fiz algumas mudanças no código mas ainda não está funcionando corretamente, seguem as mudanças feitas e os erros apresentados no console do navegador:

<div id="map" data-latitude="{{ envio.latitude }}" data-longitude="{{ envio.longitude }}" style="width: 300px; height: 300px; margin: 3%;"></div>

<script>
      var mapElement = document.getElementById('map');
      var latitude = mapElement.dataset.latitude;
      var longitude = mapElement.dataset.longitude;

      function initMap(latitude, longitude) {
        var map = new google.maps.Map(mapElement, {
          center: { lat: latitude, lng: longitude },
          zoom: 15
        });

        var marker = new google.maps.Marker({
          position: { lat: latitude, lng: longitude },
          map: map,
          title: 'Local do Envio'
        });
      }

      initMap(latitude, longitude);
    </script>

Erros:

The Cross-Origin-Opener-Policy header has been ignored, because the URL's origin was untrustworthy. It was defined either in the final response or a redirect. Please deliver the response using the HTTPS protocol. You can also use the 'localhost' origin instead. See https://www.w3.org/TR/powerful-features/#potentially-trustworthy-origin and https://html.spec.whatwg.org/#the-cross-origin-opener-policy-header.


Uncaught ReferenceError: google is not defined
at initMap (6:74:19)
at 6:86:7


InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: not a number


InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number

Opa, boa tarde!

Cara desculpe, não sei se entendi bem, mas acredito que os erros apresentados estão relacionados a problemas na definição da latitude e longitude como números válidos. Isso pode estar acontecendo por algum erro de conversão ou interpretação dos valores.

Vamos verificar e ajustar o código para garantir que a latitude e longitude sejam corretamente reconhecidas como números.

1. No HTML, remova os parâmetros latitude e longitude no atributo data-, pois não são necessários para armazenar os valores:

<div id="map" style="width: 300px; height: 300px; margin: 3%;"></div>

1. No JavaScript, corrija o erro da função initMap ao receber os parâmetros. Como você já definiu as variáveis latitude e longitude anteriormente, não é necessário passá-las novamente como parâmetros na função initMap.

var mapElement = document.getElementById('map');
var latitude = parseFloat(mapElement.dataset.latitude);
var longitude = parseFloat(mapElement.dataset.longitude);

function initMap() {
  var map = new google.maps.Map(mapElement, {
    center: { lat: latitude, lng: longitude },
    zoom: 15
  });

  var marker = new google.maps.Marker({
    position: { lat: latitude, lng: longitude },
    map: map,
    title: 'Local do Envio'
  });
}

initMap();

Certifique-se de que as variáveis latitude e longitude estão sendo corretamente definidas a partir dos valores do atributo data- e convertidas para números usando parseFloat.

Leve em consideração que o erro de Cross-Origin-Opener-Policy, é relacionado a políticas de segurança em navegadores que restringem o acesso a recursos de diferentes origens. Para resolver esse erro, você precisa acessar a página através do protocolo HTTPS ou usar localhost como a origem ao desenvolver localmente. Caso esteja desenvolvendo em localhost e ainda encontra o erro, verifique as configurações do servidor e certifique-se de estar usando HTTPS ou que o servidor local esteja corretamente configurado para permitir esse acesso.

Espero ter ajudado!

Fiz as adições recomendadas mas não esta funcionando ainda, adicionei um console.log para ver se os valores de latitude e longitude estão sendo passados para as variáveis damaneira correta, e ele retornou um NaN (not a number)