Google maps in toggle

Question

I have problems with lay out of the goole maps. I am using simple toggle to open the map, but i see only a part of the map.

Then i use acf (advanced custom field) for wordpress to show the map. But i have seen that toggle is in conflict with google api.

This is a stamp of the result:

http://lab-360.it/img/maps.jpg

Here is the code:

/*toggle*/

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');
        elem.toggle('fast');
    });
});


/*acf render map*/

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

var map;

function render_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
    };

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

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

        });
    }

}

/*
 *  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).on('click', '.map', function () {
        google.maps.event.trigger(map, 'resize');
        map.setCenter(bounds.getCenter());
        map.setZoom(16);
    });

}

/*
 *  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 () {

    $('.acf-map').each(function () {

        render_map($(this));

    });

});
})(jQuery);

This is the code in content.php

<?php $location = get_field('luogo'); if($location['address']) { ?>
<a href="#" class="togglelink-map">accedi</a>
<div class="acf-map">
<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"  itemprop="map"></div>
</div>
<?php } ?>

Answer 1

The basic issue is that the map-div(s) don't have a size when you create the map.

The easiest approach would be to trigger the resize-event of the window when you toggle a map(take a look at the last line):

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');

        elem.toggle('fast',function(){google.maps.event.trigger(window,'resize')});
    });
});

The problem: the map will not be centered at the desired position, and there is no handle to the maps-instance to apply a centering.

Another approach:

Trigger a custom event for the map-div:

$(document).ready(function () {
        $('.acf-map').hide();
         $('a.togglelink-map').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.acf-map')
        $('.acf-map').not(elem).hide('fast');

        elem.toggle('fast',function(){google.maps.event.trigger(this,'toggle');});

    });
});

In render_map define a handler for this custom event:

    map = (function (o, a) {
        var m = new google.maps.Map(o, a);
        google.maps.event.addListener(o, 'toggle', function () {
            var c = m.getCenter();
            google.maps.event.trigger(m, 'resize');
            if(!m.get('centered')){
               m.setCenter(c);
               m.set('centered',1);
            }
        });
        return m;
    })($el[0], args);

Demo: http://jsfiddle.net/doktormolle/3rQuk/