Đăng ngày: 09/12/2018 bởi PhuocIT | Tổng 1167 Lượt Xem
Chức năng này khá hay với những website bất động sản và các website về dịch vụ như: Show tất cả các bất động sản trên google maps, show tất cả các nhà hàng, khách sạn… lên trên maps.
Mình đã dùng chức năng này cho website : phongtrodn.com
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.
“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
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à oke
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é!
|
1
2
3
4
5
6
7
8
9
|
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à oke!
Các bạn có thể kéo maker đi vị trí khác để cho đúng địa điểm mình mong muốn
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é!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
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 đó:
Đây là dữ liệu trả về khi mình in thử hàm đó ra
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é!
|
1
2
3
4
5
6
7
|
<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
|
1
2
3
4
5
6
7
8
9
10
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<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: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Hôm nay mình đã hướng dẫn cho các bạn cách hiện thị google maps trong wordpress bằng cách sử dung google maps API. Và cũng như hiện thị được các marker lên google maps đó. Hy vọng bài viết này sẽ giúp bạn tạo thêm được những chức năng thú vị trong quá trình học lập trình theme wordpress nhé.
Google maps API còn nhiều thứ hay ho lắm. Mình sẽ có từ 1 đến 2 bài về google maps trong wordpress nữa. Bạn nào muốn tìm hiểu thì quan tâm theo dõi nhé! Nếu có thắc mắc gì về bài viết này thì hãy cmt phía dưới mình sẽ trả lời cho nhé!
Chào các bạn! Chúc các bạn thành công!
Nhớ ghi nguồn tại Phước IT Blog - PhuocIT.Com nhé!
Phuocit Chia sẻ miễn phí , hỗ trợ nhiệt tình!
Để thành công
Trước tiên ta phải tin là ta có thể
" Kinh doanh? Rất đơn giản; đó là tiền của người khác! "
