Xây dựng website bất động sản bằng Flatsome và ACF Phần 3

Xây dựng chức năng bản đồ cho bất động sản

Vị trí chèn bản đồ

Trong phần này chúng ta sẽ xây dựng chức năng bản đồ ( Google Maps ) cho bất động sản mà ta bán.

Cụ thể ở đây mình sẽ chèn Bản đồ ở tab của woocommerce, bên phải tab mô tả

Xây dựng website bất động sản bằng Flatsome và ACF Phần 3

Tạo field để nhập vị trí tọa độ latitude và longtitude

Đầu tiên chúng ta sẽ tạo field để nhập tọa độ bản đồ bằng ACF

Các bạn vào Custom Fields / Field Group và bấm vào chỉnh sửa để tiến hành thêm Field nhập Google maps

Xây dựng website bất động sản bằng Flatsome và ACF Phần 3

Bạn Add Field như sau :

Field Label : Vị trí

Field Name : vitri

Field Type : Google Map

Xây dựng website bất động sản bằng Flatsome và ACF Phần 3

Thiết lập API cho Google Map

Để Google Map hoạt động chúng ta phải Setting API cho nó

Trong thư mục functions mình sẽ tạo một file google-maps-api.php với nội dung sau :

( Nhớ require_once nó vào file functions.php của childtheme nhé )

Nội dung này bên hướng dẫn ACF cung cấp, các bạn chỉ việc thay đổi chuỗi xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx thành API KEY mà google cung cấp cho bạn.

p/s : Để lấy API các bạn vào đây : https://developers.google.com/maps/documentation/javascript/get-api-key

<?php 
// Thiết lập api
function my_acf_google_map_api( $api ){
    $api['key'] = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
    return $api;
}
add_filter('acf/fields/google_map/api', 'my_acf_google_map_api');


// Javascript Hỗ trợ hiển thị
function js_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=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></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>

<?php 

}

add_action( 'wp_footer', 'js_google_map') ;

Nhập tọa độ cho các bài viết bất động sản

Sau đó các bạn vào chỉnh sửa bất động sản thì chúng ta sẽ có ô nhập vị trí.

Các bạn nhập địa chỉ vào và bấm tìm thằng google nó sẽ tìm vị trí cho chúng ta.

Xây dựng website bất động sản bằng Flatsome và ACF Phần 3

Hiển thị bản đồ ra ngoài

Và bây giờ việc của bạn là đưa nó ra ngoài hiển thị trong trang sản phẩm bất động sản.

Ở đây chúng ta sẽ tạo Custom Tab cho woocommerce

Trong thư mục functions Bạn tạo một file show-google-map.phpvà tiến hành require nó vào file functions.php của theme

Sau đó chúng ta sẽ code cho file show-google-map.php

<?php 
/**
 * Thêm custom tab để hiển thị bản đồ 
 */
add_filter( 'woocommerce_product_tabs', 'add_new_tab' );
function add_new_tab( $tabs ) {
    // Adds the new tab
    $tabs['vitri'] = array(
        'title'     => __( 'Vị trí', 'woocommerce' ),
        'priority'     => 50,
        'callback'     => 'noidung_tab'
    );
    return $tabs;
}

function noidung_tab() {
    ?>
<div class="noidungtab">
    <h3>Vị trí bất động sản</h3>
<?php 
$vitri = get_field('vitri');

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

Tổng kết

Tổng kết Phần 3 bài hướng dẫn làm website bất động sản với flatsome và acf chúng ta có như sau

File functions.php của child theme

<?php
require_once get_stylesheet_directory() . '/functions/enqueue.php' ;
require_once get_stylesheet_directory() . '/functions/show-fields.php' ;
require_once get_stylesheet_directory() . '/functions/show-fields-archive.php' ;
require_once get_stylesheet_directory() . '/functions/google-maps-api.php' ;
require_once get_stylesheet_directory() . '/functions/show-google-maps.php' ;

File google-maps-api.php

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



function js_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=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></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>

<?php 

}

add_action( 'wp_footer', 'js_google_map') ;

Cuối cùng là file show-google-maps.php

<?php 
/**
 * Thêm bản đồ hiển thị vị trí bất động sản
 */
add_filter( 'woocommerce_product_tabs', 'add_new_tab' );
function add_new_tab( $tabs ) {
    // Adds the new tab
    $tabs['vitri'] = array(
        'title'     => __( 'Vị trí', 'woocommerce' ),
        'priority'     => 50,
        'callback'     => 'noidung_tab'
    );
    return $tabs;
}

function noidung_tab() {
    ?>
<div class="noidungtab">
    <h3>Vị trí bất động sản</h3>
<?php 
$vitri = get_field('vitri');

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

 

Vui lòng chờ 30 giây. Chúng tôi đang lấy link cho bạn ... !
0 0 vote
Article Rating
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Nguyễn Kim Hoàng
7 days ago

mình tới bước show ra màn hình thì không hiện bạn ơi