Site icon Knowledge Base| Kiến thức Dịch vụ P.A Việt Nam

Hiển thị Google Maps trong WordPress bằng Google Maps API

Hiển thị Google Maps trong WordPress bằng Google Maps API

1. Các kiến thức cần chuẩn bị để cấu hình Google Maps trong WordPress

Vì bài viết này mình sẽ sử dung plugin ACF nên các bạn nhớ cài trước nha! Và tất nhiên các bạn cũng phải biết sơ qua về lập trình theme wordpress.

 

2. Hiển thị Google Maps trong WordPress bằng Google Maps API

Ví dụ yêu cầu chức năng:

“Hiển thị google maps ngoài trang chủ của website. Trên maps đó chứa nhiều maker, mỗi marker tượng ứng cho một bài post, khi click vào một marker sẽ hiện title của bài viết và một số thông tin mô tả của bài post đó.”

Hướng giải quyết => Với ví dụ này mình sẽ dùng ACF tạo custom filed với field type là “Map” => ra trang chủ get list các bài post với các info maps => show lên trên maps bằng google maps API

2.1. Tạo khu vực post Google Maps trong WordPress Admin bằng Plugins ACF

Bước 1: Cài đặt plugin ACF (Advanced Custom Fields): Các bạn vào khu vực plugin ấn cài đặt search từ khóa “Advanced Custom Fields” và cài đặt plugin như hình dưới

Bước 2: Tạo khu vực post google maps trong chi tiết của mổi bài viết

Các bạn vào menu Custom fields chọn add new và điền thông tin giống như hình bên dưới nhé! Sau đó bấm nút đăng là được.

Bước 3: Đăng bài viết có kèm với google maps

Các bạn vào phần bài viết ấn thêm mới 1 bài viết, điền các thông tin như viết bài bình thường. Ở khu vực google maps bạn search địa điểm cần hiển thị, bạn có thể dùng chuột kéo marker đi các vị trí trên maps sao cho chọn đc địa điểm thích hợp.

** Chú ý: Như mình nói ở trên thì, google maps api cần phải có API key nó mới chạy được. Nếu bạn có key api rồi thì chèn đoạn code dưới đây vào file functions.php của theme đang dùng để cái google maps của plugin ACF nó chạy nhé!

function my_acf_google_map_api ( $api ){
     $api[‘key’] = ‘Key API’; // Thay key api của bạn vào đây nhé
     return $api;
}
add_filter(‘acf/fields/google_map/api’, ‘my_acf_google_map_api’);
function my_acf_init() {
     acf_update_setting(‘google_api_key’, ‘Key API’);
}
add_action(‘acf/init’, ‘my_acf_init’);

Bạn thay key api của mình vào nhé! Sau khi thay vào chờ tầm 1 2 phút thì vào khu vực viết bài nó ko còn cách báo nữa là được!

“Các bạn có thể kéo maker đi vị trí khác để cho đúng địa điểm mình mong muốn.”

2.2. Hiển thị Google Maps trong WordPress ra ngoài trang chủ

Bước 1: Get list bài viết có kèm thông tin google maps. Mình sẽ dùng vòng lặp get post để lấy các bài viết ra rồi cho vào 1 cái mảng.

Chèn đoạn code sau vào file functions.php của theme đang dùng nhé!

function getpost_maps_home($num) {
     $arraymaps = array(); // khải báo 1 mảng rỗng
     $getposts = new WP_query(); $getposts->query(‘post_status=publish&showposts=’.$num.’&post_type=post’); // $num là số lượng bài viết
     global $wp_query; $wp_query->in_the_loop = true;
     while ($getposts->have_posts()) : $getposts->the_post();
          $map = get_field(‘map’); //get maps từ plugin ACF
          $arraymaps[] = array(
               ‘id’ => get_the_ID(), // lấy tiêu đề cho vào mảng
               ‘title’ => get_the_title(), // lấy tiêu đề cho vào mảng
               ‘lat’ => $map[‘lat’], // Lấy lat
               ‘lng’ => $map[‘lng’] // lấy lng

          );
     endwhile; wp_reset_postdata();
     return $arraymaps; // trả mảng chứa thong tin của maps
}

Đoạn code này khởi tạo hàm get list các bài post trong đó:

Bước 2: Viết code javascipt để hiển thị maps

Các bạn chèn đoạn code sau vào file index.php nhé!

<style>
     #maps-home{
          height: 100vh;
          width: 100%;
     }
</style>
<div id=”maps-home”></div>

Đoạn code này để chỉ định khu vực hiện cái Google Maps.

<script>
     function initMap() {
          var myLatLng = {lat: 16.0566682, lng: 108.1733446};
          var map = new google.maps.Map(document.getElementById(‘maps-home’), {
               zoom: 12,
               center: myLatLng
          });
}
</script>
<script async defer src=”https://maps.googleapis.com/maps/api/js?key={key API}&callback=initMap”></script>

Đoạn code này sẽ hiển thị Google Maps trong WordPress mà chưa có các marker.

Bước 3: Hiện thị các marker lên bản đồ.

Chúng ta tiến hành bổ sung một số thành phần vào đoạn script trên để được sản phẩm hoàn thiện nhé. Các bạn tiếng hành sửa đoạn script trên như sau:

<script>
     var markerslist = <?php echo json_encode(getpost_maps_home(5)); ?>;
     function initMap() {
          var myLatLng = {lat: 16.0566682, lng: 108.1733446};
          var map = new google.maps.Map(document.getElementById(‘maps-home’), {
               zoom: 12,
               center: myLatLng
          });
          for (i = 0; i < markerslist.length; i++) {
               add_marker(markerslist[i], i, map);
          }
     }
     function add_marker(markers, iter, map){
          var infowindow = new google.maps.InfoWindow({
               content: ”
          });
          var pos = new google.maps.LatLng(Number(markers.lat), Number(markers.lng));
          var content = ‘<h4>’+markers.title+'</h4>’;
          marker = new google.maps.Marker({
               position: pos,
               map: map,
               iter: iter,
               content: content,
               title: markerslist.title
          });
          google.maps.event.addListener(marker, ‘click’, (function (marker, content) {
               return function () {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                    map.setZoom(13);
                    map.panTo(this.getPosition());
               }
          })(marker, content));
     }
</script>
<script async defer src=”https://maps.googleapis.com/maps/api/js?key={Key API}&callback=initMap”></script>

Kết quả đạt được như sau:

 

Tài liệu tham khảo: Tại đây

 

Tham khảo các hướng dẫn và thông tin về cPanel & WHM tại: https://kb.pavietnam.vn/category/linux-hosting/whm-cpanel
Đăng ký dịch vụ do P.A Việt Nam cung cấp tại: https://www.pavietnam.vn/
Link tham khảo & bảng giá các dịch vụ WordPress Hosting: https://www.pavietnam.vn/vn/wordpress.html
Tham khảo các ưu đãi hiện có tại: https://www.pavietnam.vn/vn/tin-khuyen-mai/
Facebook: https://www.facebook.com/pavietnam.com.vn

4.5 / 5 ( 46 bình chọn )
Exit mobile version