Loading Google Maps in a bootstrap tab after AJAX has finished

Shaun Lippitt

#82631

Hi Trevor / Ross,

I’ve got a property search page on my website which displays the posts in both a list and map format and adds the posts as individual markers on the google map.

Because the map is in a bootstrap tab i had to re initiate the map using this:

$('#tab-menu a').click(function(e) {
            e.preventDefault()
            $(this).tab('show')
        })

        $('a[href="#mapview"]').one('click', function() { // http://api.jquery.com/one/
            $('#map_canvas').each(function() {
                render_map($(this));
				
            });
			 
        });

However, after using the AJAX search the Google map stops working again and shows a blank image. I’ve tried using the code below but it doesn’t seem to work. Have you got ideas to why it’s not working?

$(document).on("sf:ajaxfinish", ".searchandfilter", function() {
            console.log("ajax complete");
			
			
			  $('.nav-tabs a').click(function(e) {
				 $(this).tab('show')
       		 })
				
				$('a[href="#mapview"]').one('click', function() { // http://api.jquery.com/one/
				console.log("map tab opened");
					
				$('#map_canvas').each(function() {
                render_map($(this));
				
					});
	
	});

Link to site: http://bluemoontesting.co.uk/RSL-test/properties-for-sale/

Add New Note to this Reply

Trevor Moderator

#82650

I added code tags around the js (you had used single quote marks instead of the back tick.

The code snippet appears to be missing a final set of closing curlybrace and bracket:

$(document).on("sf:ajaxfinish", ".searchandfilter", function() {
            console.log("ajax complete");
			
			
			  $('.nav-tabs a').click(function(e) {
				 $(this).tab('show')
       		 })
				
				$('a[href="#mapview"]').one('click', function() { // http://api.jquery.com/one/
				console.log("map tab opened");
					
				$('#map_canvas').each(function() {
                render_map($(this));
				
					});
		 });
	});

Add New Note to this Reply

Shaun Lippitt

#82656

Hi Trevor,

Thanks for getting back to me on this..

I do have the closing brackets in the full code but i didn’t copy the whole thing across. The full code for the map.js is as follows:

(function($) {

    /*
     *  render_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 render_map($el) {

        // var
        var $markers = $el.find('.marker');

        // vars
        var args = {
            zoom: 10,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        // 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);
    }

    // create info window outside of each - then tell that singular infowindow to swap content based on click
    var infowindow = new google.maps.InfoWindow({
        content: ''
    });

    /*
     *  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
        });

        // add to array
        map.markers.push(marker);

        // if marker contains HTML, add it to an infoWindow
        if ($marker.html()) {

            // show info window when marker is clicked & close other markers
            google.maps.event.addListener(marker, 'click', function() {
                //swap content of that singular infowindow
                infowindow.setContent($marker.html());
                infowindow.open(map, marker);
            });

            // close info window when map is clicked
            google.maps.event.addListener(map, 'click', function(event) {
                if (infowindow) {
                    infowindow.close();
                }
            });

        }

    }

    /*
     *  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);
        }

    }

    /*
     *  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
     */
	 
	 

$(document).ready(function() {
	
        $('#tab-menu a').click(function(e) {
            e.preventDefault()
            $(this).tab('show')
        })

        $('a[href="#mapview"]').one('click', function() { // http://api.jquery.com/one/
            $('#map_canvas').each(function() {
                render_map($(this));
				
            });
			 
        });
		
		
		
		 $(document).on("sf:ajaxfinish", ".searchandfilter", function() {
            console.log("ajax complete");
			
			
			  $('.nav-tabs a').click(function(e) {
				 $(this).tab('show')
       		 })
				
				$('a[href="#mapview"]').one('click', function() { // http://api.jquery.com/one/
				console.log("map tab opened");
					
				$('#map_canvas').each(function() {
                render_map($(this));
				
					});
				});
           	
    
            
        });
		});
(jQuery);
})(jQuery);

If you look at the link i supplied you should see the problem im describing… It loads fine before making a search but as soon as the AJAX is finished the map isn’t displaying the markers correctly :/

Add New Note to this Reply

Trevor Moderator

#82659

It looks like that code runs when the document is ready? Which it isn’t after an ajax refresh.

What you could do, if I am looking at this right (and I could easily be wrong), is make all the code for the maps stuff and a named function, and then have a small snippet that calls this on document ready. and then you can make the same call in our code snippet.

maybe?

I know that maps in tabs are a nightmare. I spent ages getting them to work in Visual Composer in tabs. That was without the added complexity of the search and ajax.

Add New Note to this Reply

Shaun Lippitt

#82769

Hi Trevor,

Putting it in a function and then calling that in the snippet of code worked! Thank you!

Add New Note to this Reply

Trevor Moderator

#82772

I can close this thread now?

Add New Note to this Reply

[Author]

Posts