Support

Account

Home Forums ACF PRO Multiple ACF google map on one page inside accordion

Solved

Multiple ACF google map on one page inside accordion

  • Hi I am using archive-locations, where each post has map and its coming from wp_query loop, all locations are coming in bootstrap collapse. The first map loads, but other map does not. If you resize or inspect element then you can see the map but still map is not on centre position. Please check the URL, hoping for the solution.

    http://newyork-minute.com.au/development/locations/

    https://support.advancedcustomfields.com/forums/topic/multiple-google-maps-on-one-page/
    I have checked this thread also, but this is not helping me. I could not figure out where I am wrong. Please help
    https://support.advancedcustomfields.com/forums/topic/multiple-google-maps-on-one-page/

  • Hi @debendra

    That’s because you show the map in a collapsed element, so Google map doesn’t know the canvas size until you resized your browser’s window. Here are some threads on the same issue: http://stackoverflow.com/questions/10197128/google-maps-api-v3-not-rendering-competely-on-tabbed-page-using-twitters-bootst, http://stackoverflow.com/questions/3838580/google-map-comes-partially-grey-area-comes-instead-of-images-from-google-server.

    I hope this helps 🙂

  • I must be dumb, i couldn’t figure out the right code. 🙁

  • Hi @debendra ,

    Thanks for the follow up.

    Were you able to fix up the issue?

    If not, kindly open a private support ticket with us so that I may have a closer look at your problem.

    Hope to hear from you soon.

  • This reply has been marked as private.
  • Hi @debendra

    Could you please open a new ticket and provide temporary admin credentials here: https://support.advancedcustomfields.com/new-ticket? Don’t forget to explain the issue again or provide the link to this thread.

    Thanks 🙂

  • Hi James,
    My friend helped me out in this, removed all ACF map code and put this one, and it worked like a charm.

    <script>
    function createMap(id){
    	var Element = $("#" + id);
    	if (Element.find(".marker").length != 1){
    		return;
    	}
    	var latlng = new google.maps.LatLng(Element.find(".marker").data("lat"), Element.find(".marker").data("lng"));
    	var myOptions = {
    			zoom: 16,
    			center: latlng,
    			mapTypeId: google.maps.MapTypeId.ROADMAP,
    			disableDefaultUI: true,
    			mapTypeControl: false,
    			zoomControl: true,
    			scrollwheel: false,
    			zoomControlOptions: {
    					style: google.maps.ZoomControlStyle.SMALL
    			}
    	};
    
    	var map = new google.maps.Map(Element[0], myOptions);
    	console.log("Creating map at " + Element.attr('id'));
    
    	var marker = new google.maps.Marker({
    			icon: "<?php bloginfo('template_url'); ?>/img/custom_marker.png",
    			position: latlng,
    			map: map
    	});
    	return {map: map, marker: marker};
    }
    
    var $ = jQuery;
    	$('.panel-collapse.collapse').parent().find(".panel-title a").click(function(){
    		//console.log($(this).parent().parent().parent().find(".acf-map").attr('id'));
    		var result = createMap($(this).parent().parent().parent().find(".acf-map").attr('id'));
    		if (result != null){
    			google.maps.event.addListenerOnce(result.map, 'idle', function(){
    				google.maps.event.trigger(result.map, 'resize');
    				result.map.setCenter(result.marker.getPosition());
    			});
    		}
    	});
    
    	//Run create map on the first map - because it is already visible
    	createMap($(".acf-map").attr("id"));
    </script>
  • Hi,

    I’m having an issue with displaying multiple google maps that are not in an accordion.

    I created a repeater for different locations, for each row I have the name of the location and the google map field. I tried to output that in my template using the code provided by ACF, but the maps appear with no pin/marker, and are not in the right spot on the map.

    If I have only one row in my repeater, it works fine. So I’m assuming that it’s a problem between the js and my html elements.

    Each map div has the class .acf-map, but I see in the js that it uses .each to make sure it works for multiple maps.

    Is there something wrong with my code? (note that I don’t want multiple markers in one map, but multiple maps with each one marker).

    <?php if(have_rows('contact_locations_repeater')): ?>
    				<?php while(have_rows('contact_locations_repeater')): the_row(); ?>
    					<div class="location">
    						<div class="map">
    							<!-- GOOGLE MAP-->
    							<?php 
    							$location = get_sub_field('google_map');
    							if( !empty($location) ):
    							?>
    							<div class="acf-map">
    								<div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div>
    							</div>
    
    							<?php endif; ?>
    							<!-- END GOOGLE MAP-->  
    						</div>
    						
    							<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDsVBtPm96bvZOTLPy6yBxGBxHE9TU8mtw"></script>
    							<script type="text/javascript">
    							(function($) {
    
    							/*
    							*  new_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 new_map( $el ) {
    
    								// var
    								var $markers = $el.find('.marker');
    
    								// vars
    								var args = {
    									zoom		: 18,
    									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 );
    
    								// return
    								return 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,
    									title:    'DSRU',
    									icon:     '<?php the_field('map_pin');?>' 
    								});
    
    								// 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 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) );
    
    								});
    
    							});
    
    							})(jQuery);
    							</script>		
    						<div class="text_block">
    							<h3><?php the_sub_field('contact_location_name');?></h3>
    							<p><?php the_sub_field('contact_location_address');?></p>
    						</div>
    					</div>			   
    				<?php endwhile;?>
    			<?php endif;?>
Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘Multiple ACF google map on one page inside accordion’ is closed to new replies.