استفاده از فیلد Google Map یا نقشه گوگل افزونه advanced custom fields

استفاده از فیلد Google Map یا نقشه گوگل افزونه advanced custom fields

سورس کد نمایش نقشه در افزونه زمینه ساز ACF وردپرس

فیلد Google Map افزونه advanced custom fields که به فارسی “نقشه گوگل” معنی شده جهت پین کردن و نمایش یک موقعیت بر روی نقشه با استفاده از نقشه گوگل می باشد.

تنظیمات

  • لازم است : برای اجباری کردن فیلد بر روی بله تنظیم شود.
  • مرکز : طول و عرض جغرافیایی را برای نقطه پیشفرض تنظیم کنید.
  • بزرگنمایی : مقدار زوم پیشفرض و بزرگنمایی مشخصات نقشه را تنظیم کنید.
  • ارتفاع : ارتفاع پیشفرض نقشه نمایشی را تعیین میکند.
  • منطق شرطی : برای ایجاد وابستگی به مقادیر فیلد های دیگر و شرط نمایش یا مخفی سازی فیلد مربوطه برای مدیریت بهتر بر روی فرم .

نمایش اطلاعات

دریافت API گوگل

برای شروع و دریافت api گوگل مپ اینجا کلیک کنید. بعد از دریافت , کد زیر را در فایل functions.php قالب خود قرار داده و مقادیر مشخص شده را با کد دریافتی از گوگل تکمیل کنید.

<?php
// Method 1: Filter.
function my_acf_google_map_api( $api ){
    $api['key'] = 'xxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');

// Method 2: Setting.
function my_acf_init() {
    acf_update_setting('google_api_key', 'xxx');
}
add_action('acf/init', 'my_acf_init');
?>

کد راهنمای بارگذاری اطلاعات گوگل مپ

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

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

نمایش نقطه تعیین شده روی نقشه

بعد از دریافت api و قرار دادن کد راهنما در پوسته ی خود از کد زیر برای نمایش نقطه مربوطه بر روی نقشه استفاده کنید.

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

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

در کد زیر نقشه با نام location داخل یک حلقه تکرار کننده با نام locations قرار داده شده.

<?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']); ?>"></div>
                <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>';
}
?>

مطالب بیشتر

نظرات

guest
0 نظرات
بازخورد (Feedback) های اینلاین
View all comments