Reply To: Multiple ACF google map on one page inside accordion

• YannickPian

• December 6, 2018 at 12:29 am

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;?>