• elemenopy

• in reply to: Googlmap, marker marker googlemap superimposed
• April 13, 2018 at 8:06 am

Has anyone been able to get Spiderfier working with the code setup ACF recommends? I’ve been testing with trial and error but can’t seem to figure out where in the JS to put each of the functions Spiderfier requires, as the ACF example script, which I’m using, doesn’t quite match up with the Spiderfier demos. I’ve been able to at least implement it so that the “spider_click” event works, but no spidering is happening.

Thanks for any tips or hints!
-Erin

Here’s my specific code:

<script type="text/javascript">

                (function($) {
                    /*
                     *  new_map
                     *
                     *  This function will render a Google Map onto the selected jQuery element
                     *
                     *  @type	function
                     *  @date	8/11/2013
                     *  @since	4.3.0
                     *
                     *  @param	$el (jQuery element)
                     *  @return	n/a
                     */
                    function new_map($el) {
                        // var
                        var $markers = $el.find('.marker');
                        // vars
                        var args = {
                            zoom: 16,
                            center: new google.maps.LatLng(0, 0),
                            mapTypeId: google.maps.MapTypeId.ROADMAP,
                            scrollwheel: false,
                            zoomControl: true,
                            mapTypeControl: false,
                            scaleControl: true,
                            streetViewControl: false,
                            rotateControl: false,
                            fullscreenControl: false
                        };
                        // create map	        	
                        var map = new google.maps.Map($el[0], args);
                        // add a markers reference
                        map.markers = [];

                       

                        // add markers
                        $markers.each(function() {
                            add_marker($(this), map);
                        });

                        
                        // center map
                        center_map(map);
                        // return
                        return map;
                    }
                    /*
                     *  add_marker
                     *
                     *  This function will add a marker to the selected Google Map
                     *
                     *  @type	function
                     *  @date	8/11/2013
                     *  @since	4.3.0
                     *
                     *  @param	$marker (jQuery element)
                     *  @param	map (Google Map object)
                     *  @return	n/a
                     */
                    function add_marker($marker, map) {
                        // var
                        var latlng = new google.maps.LatLng($marker.attr('data-lat'), $marker.attr('data-lng'));
                        // create marker
                        var marker = new google.maps.Marker({
                            position: latlng,
                            map: map,
                            animation: google.maps.Animation.DROP,
                            icon: "<?php the_field('map_marker', 'options') ?>",
                        });

                        var oms = new OverlappingMarkerSpiderfier(map, { markersWontMove: true, markersWontHide: true, keepSpiderfied: true, legWeight: 2, circleFootSeparation: 50});

                        // add to array
                        map.markers.push(marker);
                        // if marker contains HTML, add it to an infoWindow
                        if ($marker.html()) {
                            // create info window
                            var infowindow = new google.maps.InfoWindow({
                                content: $marker.html()
                            });
                            // show info window when marker is clicked
                            google.maps.event.addListener(marker, 'spider_click', function() {
                                infowindow.open(map, marker);
                                map.setCenter(marker.getPosition());
                            });

                            oms.addMarker(marker); 
                        }
                    }
                    /*
                     *  center_map
                     *
                     *  This function will center the map, showing all markers attached to this map
                     *
                     *  @type	function
                     *  @date	8/11/2013
                     *  @since	4.3.0
                     *
                     *  @param	map (Google Map object)
                     *  @return	n/a
                     */
                    function center_map(map) {
                        // vars
                        var bounds = new google.maps.LatLngBounds();
                        // loop through all markers and create bounds
                        $.each(map.markers, function(i, marker) {
                            var latlng = new google.maps.LatLng(marker.position.lat(), marker.position.lng());
                            bounds.extend(latlng);
                        });
                        // only 1 marker?
                        if (map.markers.length == 1) {
                            // set center of map
                            map.setCenter(bounds.getCenter());
                            map.setZoom(16);
                        } else {
                            // fit to bounds
                            map.fitBounds(bounds, { left: 0, top: 200 });
                        }
                    }
                    /*
                     *  document ready
                     *
                     *  This function will render each map when the document is ready (page has loaded)
                     *
                     *  @type	function
                     *  @date	8/11/2013
                     *  @since	5.0.0
                     *
                     *  @param	n/a
                     *  @return	n/a
                     */
                    // global var
                    var map = null;
                    $(document).ready(function() {
                        $('.acf-map').each(function() {
                            // create map
                            map = new_map($(this));
                        });
                    });
                })(jQuery);
                </script>

• elemenopy

• in reply to: Preview solution !
• May 4, 2017 at 5:42 am

Hi I’m experiencing this issue still, with v 5.5.12 – has this started becoming an issue again for anyone else?

Thanks!

• elemenopy

• in reply to: Changing the order of "options" on the admin side of a relationship field?
• September 23, 2015 at 12:04 am

Thanks so much for your help – that explains why my test wasn’t working!

Agreed with the post-er in the previous question (http://support.advancedcustomfields.com/forums/topic/relationship-filter-query-by-page-template/) – would love to see this as an setting in future versions!

-Erin