php - Google maps in toggle -

php - Google maps in toggle -

i have problems lay out of goole maps. using simple toggle open map, see part of map.

then utilize acf (advanced custom field) wordpress show map. have seen toggle in conflict google api.

this stamp of result:

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

here 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 * * function render google map onto 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 together markers reference map.markers = []; // add together markers $markers.each(function () { add_marker($(this), map); }); // center map center_map(map); } /* * add_marker * * function add together marker 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 together array map.markers.push(marker); // if marker contains html, add together infowindow if ($marker.html()) { // create info window var infowindow = new google.maps.infowindow({ content: $marker.html() }); // show info window when marker clicked google.maps.event.addlistener(marker, 'click', function () { infowindow.open(map, marker); }); } } /* * center_map * * function center map, showing markers attached 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 markers , create bounds $.each(map.markers, function (i, marker) { var latlng = new google.maps.latlng(marker.position.lat(), marker.position.lng()); bounds.extend(latlng); }); // 1 marker? if (map.markers.length == 1) { // set center of map map.setcenter(bounds.getcenter()); map.setzoom(16); } else { // fit bounds map.fitbounds(bounds); } $(document).on('click', '.map', function () { google.maps.event.trigger(map, 'resize'); map.setcenter(bounds.getcenter()); map.setzoom(16); }); } /* * document ready * * function render each map when document 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 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 } ?>

the basic issue map-div(s) don't have size when create map.

the easiest approach trigger resize-event of window when toggle map(take @ lastly 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: map not centered @ desired position, , there no handle maps-instance apply centering.

another approach:

trigger custom event 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 handler 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); } }); homecoming m; })($el[0], args);

demo: http://jsfiddle.net/doktormolle/3rquk/

php jquery wordpress google-maps