Reply To: Googlmap, marker marker googlemap superimposed

• elemenopy

• 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>