O Google Maps API só está renderizando uma parte do mapa

1
resposta

por Pietro Moring Salum Bondioli

| 97.7k xp | 1 posts

Bom dia. Eu tenho o seguinte código de uma página web que chama a API do google maps: https://codepen.io/PietroBondioli/pen/pooLyLL. Ela está funcionando e os mapas estão sendo exibidos corretamente, porém ao tentar interagir/rolar o mapa percebe-se que este só está renderizando parcialmente (ele somente renderiza a área inicial que foi escolhida através dos parâmetros passados para os objetos instanciados a partir da classe 'Map'). Seguem imagens do problema: Como o Mapa carrega inicialmente: https://prntscr.com/psv9cy Como ele fica quando eu interajo com ele: https://prntscr.com/psv9ev

PasteBin do Código: https://pastebin.com/c2J2r9xv

1 resposta

por Matheus Henrique Castiglioni

| 5308.1k xp | 9007 posts

Instrutor

25/11/2019

Fala ai Pietro, tudo bem? Fiz algumas alterações na parte dos script's, segue:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
   <script src="https://maps.googleapis.com/maps/api/js?key=" async defer></script>
   <script>
      function createMap(elementID, latitude, longitude) {
        var location = new google.maps.LatLng(latitude, longitude);
            var map = new google.maps.Map(document.getElementById(elementID), {
               zoom: 15,
               center: location,
               gestureHandling: 'cooperative'
            })
            var marker = new google.maps.Marker({
               position: location,
               map: map,
               title: 'Mapa'
            })
      }

      $(function () {
         $(window).load(
            function () {
                createMap('map1', -19.948291, -45.454648)
                createMap('map2', -22.547467, -46.652239)
            }
         )
      })
   </script>

O problema estava na classe, não sei porque quando usa-se classe o mesmo da erro no contexto, this.h.keys.

Apenas troquei sua classe por uma função.

E também retirei o callback na URL do script do maps.

Espero ter ajudado.

Trilhas por carreira

Carreiras de IA

Carreiras de Dados

Carreiras de Cyber

Carreiras de DevOps & Cloud

Carreiras de UX & UI

Carreiras de Mobile & Front-End

Carreiras de Back-End

Carreiras de Negócios

Cursos universitários FIAP

Tópicos relacionados

Conteúdos Alura com o tema