Zobrazení Google Mapy po rozkryti divu jQuery

1. 12. 2016 23:22:09

Ahoj,

mám gmaps v divu ktery je ppri nasteni stranky skryty a odkrývam ho js. Mapa se ale pote nezobrazi.

/*
*  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
*/
// global var
var map = null;

$(document).ready(function(){

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

// create map
        map = new_map( $(this) );

});

$( ".mapa" ).click(function() {
  $( '.acf-map' ).delay( 500 ).fadeIn( 500 );
  google.maps.event.trigger(map, "resize");
  
});

Kdyz mapu neskryji pri nacteni stranky tak se to normalne v poradku zobrazi. KDe je prosim chyba?

1. 12. 2016 23:22:09

https://webtrh.cz/diskuse/zobrazeni-google-mapy-po-rozkryti-divu-jquery/#reply1240895

David Musil

(69 hodnocení)

2. 12. 2016 01:40:38

Postni prosim cely kod.

Pripdane, zkus jen v operaci kliknu na .mapa udelat pouze .show(). Smaz prozatim ten fadeIn.

2. 12. 2016 01:40:38

https://webtrh.cz/diskuse/zobrazeni-google-mapy-po-rozkryti-divu-jquery/#reply1240894

vpixle

(3 hodnocení)

3. 12. 2016 01:45:44

Google mapy jsou háklivé na div ve kterém se mají inicializovat. Sám toho ve vanilla JS už moc nenapíšu, ale našel jsem toto. http://stackoverflow.com/a/4064701

3. 12. 2016 01:45:44

https://webtrh.cz/diskuse/zobrazeni-google-mapy-po-rozkryti-divu-jquery/#reply1240893

Gatta

3. 12. 2016 16:42:16

Nedávno jsem řešil stejný problém. Po zobrazení DIVu, ve kterém je mapa iniciovaná je třeba zavolat metodu "resize" a mapu opět vycentrovat. Důležité je, aby byl DIV již plně zobrazený. Zkus následující:

3. 12. 2016 16:42:16

https://webtrh.cz/diskuse/zobrazeni-google-mapy-po-rozkryti-divu-jquery/#reply1240892

Pro odpověď se přihlašte.

Přihlásit