dynamically remove pins after map loaded

[airplanenoise]

hi –

since we can’t actually do filtering by query before the map loads when using ACF pins, we want to try to make a map that only shows certain pins based on a set of criteria. we are thinking we can probably do that dynamically via JS, affecting the pin list after the map loads initially.

how can i talk to the map pins via JS after the map loaded? i can tell from Console that there are tons of JS functions available, if you can put us on the right track, that would be awesome. something like wpgza_markers.remove(ID) or anything like that would be helpful.

thanks a ton,

Kaz

[Matthew]

Hi Kaz,

Thank you for getting in touch with us, we do appreciate your time.

Each marker has a ‘visible’ attribute which will either display the marker or hide the marker depending what it is set to, thus here is the respective custom JS code that is needed to hide the markers on page load:

jQuery(function($){
    // Listen for the 'markersplaced' event
    $(document).on('markersplaced.wpgmza', function(){
        // Get the map object
        var map = WPGMZA.maps[0];

        // Loop through each marker in the map
        for(var mI in map.markers){
            // Hide the marker
            map.markers[mI].setVisible(false);
        }
    })
})

Please do let me know if this helps?

Kindest Regards,
Matthew

[Author]

Posts