Bạn Tìm Gì Hôm Nay ...?

Tất cả đều có chỉ trong 1 nốt nhạc !

Nếu cần hỗ trợ chi tiết gọi 1900 9477

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

  • Thursday 06/02/2020

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

  • Biết và hiểu về post type trong wordpress
  • Biết và hiển về custom field trong wordpress
    Sử dụng được plugin ACF (Cài trước khi làm bài này nhé)
  • Đọc trước về google maps API tại đây
  • Tạo một key API (Phải có key thì google maps api mới chạy được nhé)
  • Vì google maps API sẽ sử dụng javascript nên các bạn cần có một ý kiến thức về js như: If else, Các vòng lặp, Array, object…

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 đó:

  • $num là số lương bài post muốn lấy
  • $map = get_field(‘map’) Đặt biến $map get dữ liệu của custom filed map. Biến $map sẽ nhận giá trị là 1 mảng gồm có 3 phần tử (lat, lng, address).
  • Đoạn code tiếp theo khi get được dữ liệu vòng lặp sẽ add từ mảng giá trị vào biến $arraymaps
  • Cuối cung trả dữ liệu về là biến $arraymaps về.

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.

  • myLatLng là khái bao tạo độ trung tâm của cái maps (hiện tại mình đang để ở Đà Nẵng)
  • zoom là độ zoom của bản đồ.
  • Chổ link script google maps các bạn nhớ điền key api của các bạn vào đó nhé!
  • Chổ link script google maps chúng ta gọi chạy hàm callback=initMap() để chạy hiển thị google maps

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>

  • Khai bảo biến markerslist chứa danh sách các bài post được lấy ra từ hàm getpost_maps_home(5) ở đây mình chỉ lấy 5 bài viết. Chúng ta phải dùng hàm json_encode chuyển dữ liệu ra về thành kiểu json thì javascript mới hiểu được.
  • Trong hàm initMap() chúng ta thêm 1 vòng for thự hiện add các marker lên bản đồ. Mỗi lần lặp nó sẽ add 1 marker số lần lặp tùy thuộc vào biến markerslist có nhiều phần tử hay không.
  • Hàm add_marker thực hiện nhiệm vụ add marker vào bản đồ và hiện info khi click vào marker đó.

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

Rate this post

Bài viết liên quan:

  1. WordPress REST API là gì? Hướng dẫn sử dụng WordPress REST API
  2. Tắt JSON REST API trong WordPress
  3. Google Form là gì và Lý do bạn nên sử dụng Google Form trong giảng dạy và học tập

Tag phổ biến