lacee1986
8/9/2016 - 1:54 PM

Google maps API with ACF

Google maps API with ACF

.google-acfmap {width: 100%; height: 600px; border: #ccc solid 1px; margin: 20px auto; float: left;}
.google-acfmap .location-image { width:100px; height:auto; float:left; margin-right: 15px;}
/** FIX for Bootstrap and Google Maps Info window styes problem **/
img[src*="gstatic.com/"], img[src*="googleapis.com/"] {max-width: none;}
wp_register_script( 'gmaps', get_template_directory_uri() . '/js/acfmap.js', array( 'gmapsapi' ), '1.0.0', true );
wp_register_script( 'gmapsapi', 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDHc35kwUYeB-L_77HiFcGwancN7YypC0A', array(), '1.0.0', true );
wp_enqueue_script('gmaps');
wp_enqueue_script('gmapsapi');
(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,
            scrollwheel                 : false,

            mapTypeControl              : true,
            mapTypeControlOptions: {
                style                   : google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                position                : google.maps.ControlPosition.TOP_LEFT
            },

            zoomControl                 : true,
            zoomControlOptions: {
                style                   : google.maps.ZoomControlStyle.SMALL,
                position                : google.maps.ControlPosition.LEFT_CENTER
            }
        };


// 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 );


    }

// create info window outside of each - then tell that singular infowindow to swap content based on click
    var infowindow = new google.maps.InfoWindow({
        content		: ''
    });

    /*
     *  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') );


        var $listImage = $marker.attr('data-icon');

        // create marker
        var marker = new google.maps.Marker({
            position	: latlng,
            map			: map,
            icon        : $listImage
        });

        // add to array
        map.markers.push( marker );

        // if marker contains HTML, add it to an infoWindow
        if( $marker.html() )
        {

            // show info window when marker is clicked & close other markers
            google.maps.event.addListener(marker, 'click', function() {
                //swap content of that singular infowindow
                infowindow.setContent($marker.html());
                infowindow.open(map, marker);
            });

            // close info window when map is clicked
            google.maps.event.addListener(map, 'click', function(event) {
                if (infowindow) {
                    infowindow.close(); }
            });


        }

    }

    /*
     *  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
     */

    $(document).ready(function(){

        $('.google-acfmap').each(function(){

            render_map( $(this) );

        });

    });

})(jQuery);
Go here: https://console.developers.google.com/project

- Create Project
- Google Maps JavaScript API v3 enable
- APIs and Auth —> CREDENTIALS —> Create New Key
- Browser Key
- Copy Key

Just create a new repeater with Google Maps in ACF
echo '<div class="google-acfmap">';

if ( have_posts() ) : 
  while ( have_posts() ) : the_post();
    if( have_rows('stores') ):
      while ( have_rows('stores') ) : the_row();
        $name = get_sub_field( 'store_name' );
        $location = get_sub_field( 'google_maps' );
        $icon = get_template_directory_uri() . '/images/icon-marker.png';
        ?>
          <div class="marker" data-icon="<?php echo $icon; ?>" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>">
            <div class="location-name"><?php the_sub_field( 'store_name' ); ?></div>
            <div class="location-address"><?php echo $location['address']; ?></div>
            <div class="location-details"><?php the_sub_field( 'store_details' ); ?></div>
          </div>
        <?
      endwhile;
    endif;
  endwhile;

  echo '</div><!-- .google-acfmap -->';

endif;