ACF integration displaying ALL markers instead of only current one

[Juro]

Hi, I have a CPT called “Venues” and have setup a Google Maps ACF in it for an address field. Apart from a global map used on the home page that displays all venues markers, we would like to have a separate (single venue) map on each CPT post page displaying only the marker for the address in the ACF field on that venue.

When I activate Integrations > ACF > Venues, the map shows all markers for all venues CPTs.
Is there a way to have the map pull only the current venue ACF data and only show the one marker on the venue page?

In other words – I have a “global” map on the home page with manually placed markers for all venues and would like a “single”, separate map for each venue CPT page that dynamically pulls only the marker location from the ACF field setup for that particular venue.

I hope my explanation is clear?
Thanks!

[Matthew]

Hi Juro,

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

Unfortunately this is currently not supported by default, however, some custom JS code can achieve this.

With that said, please may I ask if you may provide me with the link to one of your single venue pages so that I may take a closer look?

Kindest Regards,
Matthew

[Juro]

This reply has been marked as private.

[Juro]

Come to think of it, it doesn’t have to hide all other markers. Any way of highlighting the active one would help. Maybe being able to upload a different marker icon image for the active one? Or make it expand the info box on load? Any of these solutions would work, including the initial one of only showing that single marker.

[Matthew]

Hi Juro,

Thank you for your response and time on this, I really appreciate it!

Thank you for the link, however, I am unable to view the page due to the viewing details not working on my end.

Please may you advise?

Kindest Regards,
Matthew

[Juro]

Hi Matthew, can you please retry again now?

Thanks a bunch!

[Matthew]

Hi Juro,

Thank you for the response, I have thus been able to take a closer look and have written the respective code to hide all markers except for the related marker:

jQuery(function($){
    $(document).on('markersplaced.wpgmza', function(){

        if((window.location.href).indexOf('#') > -1){
            var pageLink = (window.location.href).substring(0, (window.location.href).indexOf('#'));
        } else {
            var pageLink = window.location.href;
        }

        let map = WPGMZA.maps[0];

        for(let marker of map.markers){

            var link = marker.link;
            
            if(pageLink !== link){

                marker.setVisible(false);

            } else {

                var latlng = new WPGMZA.LatLng({
                    lat: marker.lat,
                    lng: marker.lng
                });

                map.fitBounds(latlng);
                map.setZoom(14);

                marker.openInfoWindow();

            }

        }

    })
})

With that said, please may you save the above code into the “Custom JS” setting block (Maps -> Settings -> Advanced Settings), clear your cache and confirm if this helps?

I look forward to hearing back from you.

Kindest Regards,
Matthew

[Juro]

Thank you very much, Matthew! Your code definitely works but it breaks the other map that is suppose to show all markers – the one on the home page.
Is there a way in this plugin to add the Custom JS code on a per map level? So instead of adding the code to Map > Settings > Advanced Settings and have it affect all maps on the website, can I just add the Custom JS to one of my maps?

Thanks!

[Matthew]

Hi Juro,

Thank you for your response.

The code can indeed be adjusted to only run for your map with ID 4, thus please use the below updated code and confirm if this helps:

jQuery(function($){
    $(document).on('markersplaced.wpgmza', function(){

        let map = WPGMZA.maps[0];
        if(parseInt(map.id) != 4){
            return;
        }

        if((window.location.href).indexOf('#') > -1){
            var pageLink = (window.location.href).substring(0, (window.location.href).indexOf('#'));
        } else {
            var pageLink = window.location.href;
        }

        for(let marker of map.markers){

            var link = marker.link;
            
            if(pageLink !== link){

                marker.setVisible(false);

            } else {

                var latlng = new WPGMZA.LatLng({
                    lat: marker.lat,
                    lng: marker.lng
                });

                map.fitBounds(latlng);
                map.setZoom(14);

                marker.openInfoWindow();

            }

        }

    })
})

I look forward to hearing back from you.

Kindest Regards,
Matthew

[Juro]

That worked great!

Thanks for all your help!

[Matthew]

Hi Juro,

Thank you for getting back to me and most valued time, I tremendously appreciate it!

I am most happy to hear that, and it was my great pleasure assisting you with this.

Please may you kindly consider reviewing our plugin at https://wordpress.org/support/plugin/wp-google-maps/reviews/#new-post?

It would really mean the world to me! And if possible, please could I kindly ask you to mention both your name and mine in the review for administrative purposes as this would be a tremendous help?

Should you ever require any further assistance, I am more than happy to help.

Have a fantastic day further!

Kindest Regards,
Matthew

[Author]

Posts