Support

Account

Register Login

Forum Replies Created

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

  • Thanks guys, it works great.

    Question: how would you about create multiple forms on the same page?

    I need to build a page with multiple tabs, each one has a button to create a new post in a different post type.
    Example:
    tab 1: <button>Create new store</button>
    tab 2: <button>Create new employee</button>
    tab 3: <button>Create new team</button>

    Since the post type is defined in the arguments in PHP I cannot figure out how to make this dynamic, example: you click on tab 1 the post type for the presaved post will be “Store”, you click on tab 2 then the button saves an “employee”… and so on.

    Any help will be welcome,

  • Hi, thanks for this useful example.

    How would you go about detecting the change on a switch field?

    Right now it seems my function (triggered like yours with the “change” hook event) fires before the switch is changed (the visual switch div receives an ‘-on’ class). It causes my function to not be able to check properly if the switch is on or not.

    I’m no JS or WP expert but I was wondering if there was a way to tell my function to fire after the acf jquery, using the “change” hook.

    Thanks a lot for the help fellas,

  • Hi,

    I am messing with ACF and some JS to make calculations based on my inputs. I struggle with the switch fields.

    Basically I need to detect if a switch input is on and make a different calculation if it is. For now I rely on checking the parent of the input which receives a “-on” class when turned on, but that’s about it.

    The problem is that by firing the function on “change”, the calculation gets made first and then the switch input gets the class on. Is there a way to change the priority of my function, so that it fires right after the other Jquery functions that add the class “-on”?

Viewing 4 posts - 1 through 4 (of 4 total)