Support

Account

Home Forums Bug Reports Render the map, but the location only works when adding 1 post, after adding mor

Solving

Render the map, but the location only works when adding 1 post, after adding mor

  • Hey guys, how are you guys? I hope you are okay.

    I’m having a problem when rendering more than one map, when adding only one post, it works normally:
    http://prntscr.com/22n8ea3

    When I add more than one post, I start getting the error, the localization no longer works:
    http://prntscr.com/22n8hyn

    Console error:
    http://prntscr.com/22n983m

    I hope you can help me, I don’t know what else to do, thank you.

  • I was able to find the error, it renders several times the script I need for the map to work, so when it’s only 1 it works, when it’s more than 1 it gives the conflict:

    http://prntscr.com/22nfz7i

    This script:

    <script type="text/javascript">
    (function( $ ) {
    
    /**
     * initMap
     *
     * Renders a Google Map onto the selected jQuery element
     *
     * @date	22/10/19
     * @since	5.8.6
     *
     * @param	jQuery $el The jQuery element.
     * @return	object The map instance.
     */
    function initMap( $el ) {
    	
    	// Find marker elements within map.
    	var $markers = $el.find('.marker');
    	
    	// Create gerenic map.
    	var mapArgs = {
    		zoom		: $el.data('zoom') || 16,
    		mapTypeId	: google.maps.MapTypeId.ROADMAP
    	};
    	var map = new google.maps.Map( $el[0], mapArgs );
    	
    	// Add markers.
    	map.markers = [];
    	$markers.each(function(){
    		initMarker( $(this), map );
    	});
    	
    	// Center map based on markers.
    	centerMap( map );
    	
    	// Return map instance.
    	return map;
    }
    
    /**
     * initMarker
     *
     * Creates a marker for the given jQuery element and map.
     *
     * @date	22/10/19
     * @since	5.8.6
     *
     * @param	jQuery $el The jQuery element.
     * @param	object The map instance.
     * @return	object The marker instance.
     */
    function initMarker( $marker, map ) {
    
    	// Get position from marker.
    	var lat = $marker.data('lat');
    	var lng = $marker.data('lng');
    	var latLng = {
    		lat: parseFloat( lat ),
    		lng: parseFloat( lng )
    	};
    
    	// Create marker instance.
    	var marker = new google.maps.Marker({
    		position : latLng,
    		map: map
    	});
    
    	// Append to reference for later use.
    	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, 'click', function() {
    			infowindow.open( map, marker );
    		});
    	}
    }
    
    /**
     * centerMap
     *
     * Centers the map showing all markers in view.
     *
     * @date	22/10/19
     * @since	5.8.6
     *
     * @param	object The map instance.
     * @return	void
     */
    function centerMap( map ) {
    
    	// Create map boundaries from all map markers.
    	var bounds = new google.maps.LatLngBounds();
    	map.markers.forEach(function( marker ){
    		bounds.extend({
    			lat: marker.position.lat(),
    			lng: marker.position.lng()
    		});
    	});
    
    	// Case: Single marker.
    	if( map.markers.length == 1 ){
    	    map.setCenter( bounds.getCenter() );
    	
    	// Case: Multiple markers.
    	} else{
    		map.fitBounds( bounds );
    	}
    }
    
    // Render maps on page load.
    $(document).ready(function(){
    	$('.acf-map').each(function(){
    		var map = initMap( $(this) );
    	});
    });
    
    })(jQuery);
    </script>

    I’ve already tried calling the script in HEADER and FOOTER, but it doesn’t even show up πŸ™

  • Problem solved, we put the script out of the loop, and we were able to solve the problem

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.