زمینه دلخواه نقشه گوگل ACF Google Map

زمینه دلخواه نقشه گوگل Google Map یک رابط نقشه تعاملی برای انتخاب مکان فراهم می کند و شما قادر به ایجاد لوکیشن برای هر یک از مطالب خود هستید. این زمینه از برای جستجوی تکمیل خودکار،کدگذاری معکوس از Google Maps JS API استفاده می کند. این زمینه از نسخه 5.8.6 اطلاعات بیشتری را ذخیره می کند.

این آموزش نیازمند آشنایی با زمینه های دلخواه پیشرفته Advanced Custom Fields است. پیشنهاد می کنیم قبل از استفاده از این آموزش حتما این مقاله را مطالعه کنید.

این بخش طول و عرض جغرافیایی لوکیشن را تنظیم می کند، lat یا latitude برای تنظیم عرض جغرافیایی و lng یا longitude برای تنظیم طول جغرافیایی است.

سطلح بزرگنمایی اولیه، هنگام بارگذاری نقشه را مشخص می کند.

میزان ارتفاع زمینه دلخواه نقشه گوگل را مشخص می کند. در این قسمت فقط عدد را وارد کنید نیازی به وارد کردن px نیست.

برای استفاده زمینه زمینه دلخواه نقشه گوگل و همچنین استفاده از Google Maps JavaScript API ضروری است که ابتدا یک کلید API معتبر ثبت کنید. برای به دست آوردن یک کلید API به صفحه Google Get a API Key مراجعه کنید. زمینه دلخواه نقشه گوگل به API های زیر نیاز دارد.

Maps JavaScript API , Geocoding API , Places API

برای ثبت کلید Google API از روش های زیر استفاده کنید.

روش اول

function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

روش دوم

function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');

کد مورد نظر باید در فایل functions.php قالب قرار بگیرد.

این زمینه داده های lng و lat « طول و عرض جغرافیایی » وارد شده را بر می گرداند.

از نسخه 5.8.6 داده هایی شامل سطح بزرگنمایی کنونی در کنار داده های اختیاری از جمله street_number, street_name, city, state, post_code و country بازگشت داد می شود. لازم به ذکر است در صورتی که داده های اختیاری ذکر شده موجود نباشند نمایش داده نمی شوند. برخی از داده های اختیاری نیز در قالب کوتاه شده ارائه می شوند و با پسوند کلیدی _shkurt ذخیره می شوند.

برای نمایش مکان ذخیره شده در Google Map ، لطفاً از کد راهنما استفاده کنید.

<style type="text/css">
.acf-map {
    width: 100%;
    height: 400px;
    border: #ccc solid 1px;
    margin: 20px 0;
}

// Fixes potential theme css conflict.
.acf-map img {
   max-width: inherit !important;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
<script type="text/javascript">
(function( $ ) {

/**
 * initMap
 *
 * Renders a Google Map onto the selected jQuery element
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @return  object The map instance.
 */
function initMap( $el ) {

    // Find marker elements within map.
    var $markers = $el.find('.marker');

    // Create gerenic map.
    var mapArgs = {
        zoom        : $el.data('zoom') || 16,
        mapTypeId   : google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map( $el[0], mapArgs );

    // Add markers.
    map.markers = [];
    $markers.each(function(){
        initMarker( $(this), map );
    });

    // Center map based on markers.
    centerMap( map );

    // Return map instance.
    return map;
}

/**
 * initMarker
 *
 * Creates a marker for the given jQuery element and map.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   jQuery $el The jQuery element.
 * @param   object The map instance.
 * @return  object The marker instance.
 */
function initMarker( $marker, map ) {

    // Get position from marker.
    var lat = $marker.data('lat');
    var lng = $marker.data('lng');
    var latLng = {
        lat: parseFloat( lat ),
        lng: parseFloat( lng )
    };

    // Create marker instance.
    var marker = new google.maps.Marker({
        position : latLng,
        map: map
    });

    // Append to reference for later use.
    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 );
        });
    }
}

/**
 * centerMap
 *
 * Centers the map showing all markers in view.
 *
 * @date    22/10/19
 * @since   5.8.6
 *
 * @param   object The map instance.
 * @return  void
 */
function centerMap( map ) {

    // Create map boundaries from all map markers.
    var bounds = new google.maps.LatLngBounds();
    map.markers.forEach(function( marker ){
        bounds.extend({
            lat: marker.position.lat(),
            lng: marker.position.lng()
        });
    });

    // Case: Single marker.
    if( map.markers.length == 1 ){
        map.setCenter( bounds.getCenter() );

    // Case: Multiple markers.
    } else{
        map.fitBounds( bounds );
    }
}

// Render maps on page load.
$(document).ready(function(){
    $('.acf-map').each(function(){
        var map = initMap( $(this) );
    });
});

})(jQuery);
</script>

مثال زیر مقادیر زمینه دلخواه نقشه گوگل را نشان می دهد اما استفاده از کد راهنما اجباری است و تبدیل این کد HTML به نقشه نیازمند کد راهنما است.

<?php 
$location = get_field('location');
if( $location ): ?>
    <div class="acf-map" data-zoom="16">
        <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>"></div>
    </div>
<?php endif; ?>

مثال زیر نحوه ایجاد چندین نقشه در یک صفحه را نمایش می دهد، در این مثال از زمینه تکرار شونده ( Repeater field ) که یکی از زمینه های غیر رایگان افزونه ACF است، استفاده شده. این کد نیز نیازمند کد راهنما می باشد.

<?php if( have_rows('locations') ): ?>
    <div class="acf-map" data-zoom="16">
        <?php while ( have_rows('locations') ) : the_row(); 

            // Load sub field values.
            $location = get_sub_field('location');
            $title = get_sub_field('description');
            $description = get_sub_field('description');
            ?>
            <div class="marker" data-lat="<?php echo esc_attr($location['lat']); ?>" data-lng="<?php echo esc_attr($location['lng']); ?>">
                <h3><?php echo esc_html( $title ); ?></h3>
                <p><em><?php echo esc_html( $location['address'] ); ?></em></p>
                <p><?php echo esc_html( $description ); ?></p>
            </div>
    <?php endwhile; ?>
    </div>
<?php endif; ?>

<?php 
$location = get_field('location');
if( $location ) {

    // Loop over segments and construct HTML.
    $address = '';
    foreach( array('street_number', 'street_name', 'city', 'state', 'post_code', 'country') as $i => $k ) {
        if( isset( $location[ $k ] ) ) {
            $address .= sprintf( '<span class="segment-%s">%s</span>, ', $k, $location[ $k ] );
        }
    }

    // Trim trailing comma.
    $address = trim( $address, ', ' );

    // Display HTML.
    echo '<p>' . $address . '.</p>';
}

مقداردهی اولیه Google Map روی یک عنصر پنهان می تواند منجر به نتایج غیرمنتظره ای در هنگام نمایش شود. برای حل این مشکل پس از مشاهده عنصر نقشه، یک trigger resize را روی متغیر نقشه ایجاد کنید.

google.maps.event.trigger(map, 'resize');