Skip to content
This repository was archived by the owner on Jan 19, 2024. It is now read-only.
This repository was archived by the owner on Jan 19, 2024. It is now read-only.

fit() not updating boundaries with markers #142

@atempel

Description

@atempel

I'm using gmap3 to create markers based on a form with Units from a company at a certain city, the form outputs the city. So when it changes, I must wipe the markers from the city that was before, and create new markers for the new city.

<script>
          // Map initial configuration
          var mapa = $('#mapa-concessionarias').gmap3({
            address: 'Brasil',
            center: '',
            zoom: 4,
            mapTypeId : google.maps.MapTypeId.ROADMAP
          });

          // Map initialization
          mapa;

          // I created a function to update the markers          
          function marcaMapa() {
            // Clear the markers (different when it have one or two/more markers)
            var marcadoresAtuais = mapa.get(2);
            var marcadorAtual = mapa.get(1);

            if (marcadoresAtuais){
              for ( var i = 0; i < marcadoresAtuais.length; i++ ) {
                marcadoresAtuais[ i ].setMap(null);
              }
            } 
            else if (marcadorAtual) {
              marcadorAtual[0].setMap(null);
            }

            // Function to build an array of addresses based on a class on the front-end
            function pegaEnderecos(classe){
              var a = [];
              for ( var i = 0; i < $(classe).length; i++ ) {
                a.push( $(classe)[ i ].innerHTML );
              }

              return a;
            }

            // Variable that stores the address from above function
            var enderecos = pegaEnderecos('.info-conc p.endereco');

            // Builds an array of objects with the addresses, map and region to pass to gmap3
            var marcadores = [];

            for (var i = 0; i < enderecos.length; i++) {
              n = enderecos[i].includes('*');

              if (!n){
                var marker = {address: enderecos[i], map: mapa, region: 'BR'};
                marcadores.push(marker);
              }
            }

            // Updates the markers on the map
            mapa.marker(marcadores).wait(1000).fit().catch(function (reason) {console.log('catched: ' + reason);});
          }
        </script>

Everything works like a charm, it updates when the <select> changes, clears the markers before creating new ones.

My problem is: When it uses fit() after the second change, the boundaries of the others (that came before and were cleared) markers are not cleared, so it tries to fit all the other (and cleared) marker(s) and the newly created one(s) even though they don't "exist" anymore.
How can I update the boundaries only to match the new and existing markers before using fit()?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions