The map is not showing correctly see image 
Thanks for the help
Do you have any javascript errors or any CSS that might be clashing with the plugin?
Also, ensure that none of your other plugins are clashing with the theme. 🙂
Hi @jagipson
This looks like a rendering issue with the google map which was fixed in a recent version.
The issue was caused buy the google map being hidden by a tab field.
What version of ACF are you using?
Thanks
E
Ver 4.3.4
How do I update? No update available from the wp dashboard
Hi @jagipson
This is the latest version. I’ll do some testing and let you know what I find.
Can you let me know if there is anything else about your fields that could effect the map’s display?
Your screenshot shows a very customized UI, perhaps it is some custom JS which is causing the issue?
Same problem here, I’m using the Google Map in a lightbox. When I use it on a normal page it’s rendered correctly. No JS error is visible in the Chrome Inspector both times.
Only when I resize my window, even by 1px, the map begins to render correctly in the lightbox.
Hi @elliot
If you render a google map onto an element which is hidden, this is the result. To fix it, you need to refresh the google map like so:
google.maps.event.trigger(this.map, 'resize');
Thanks
E
Thanks for your quick suggestion, however I tried for quite a while now but can’t seem to find where to add that rule.
I’m using your code from the documentation:
<script type="text/javascript">
(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 : 16,
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 );
}
/*
* 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( 14 );
}
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(){
$('.acf-map').each(function(){
render_map( $(this) );
});
});
})(jQuery);
</script>
Hi @eaglejohn
The code I wrote will need to be fired when the google map is shown in the lightbox.
How have you got the lightbox appearing, and how do your render the map within the lightbox?
Thanks
E
erro-map.png.png
erro2.png.png
