gmap3
gmap3 copied to clipboard
fit() not updating boundaries with markers
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()
?
Found out after all this time that gmap3 runs over all the last results and additions to the map to be able to fit the bounds of everything that was added. Since I add all markers at once, its only one result behind, so I changed the source code and it worked:
self.fit = chainToPromise(function () {
var bounds = gmElement('LatLngBounds');
foreach(previousResults, function (instances) {
if (instances !== map) {
foreach(instances, function (instance) {
if (instance) {
So I changed this 3rd line, at previousResults
, to self.get(-1)
, so it runs only the last result.
Might be a good idea to separate the boundary extension from the results.
is it issue resolved ?
So I changed this 3rd line, at previousResults, to self.get(-1), so it runs only the last result. it's working for me but how can i change into gmap3.min file?
It is solved, as I found a way around, just gave a tip to separate the boundaries from the general results. But it is!
But how can i edit the .min file ?
But how can i edit the .min file ?
You can beautify it and uglify it back, or just search for "previousResults" (in the minified version) inside that scope I put up there and replace it. If you beautify and uglify it back, be sure to do a not destructive minify, don't use anything that deletes any of the code, just remove line breaks and indentation. As it's the only thing the beautify did.
Or, you can edit the full version, and minify it yourself. :D (thats what I did)
alright, Thanks