Cách chèn Google Map vào WordPress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Cách chèn Google Map vào WordPress Việc sử dụng hình ảnh bản đồ sẽ giúp địa chỉ của doanh nghiệp bạn dễ tìm thấy hơn, so với một dòng ghi địa chỉ thông thường. Bản đồ cũng sẽ giúp ích cho việc tương tác của khách truy cập và website. Bài viết này sẽ hướng dẫn bạn cách chèn Google Maps vào WordPress

Một trong các chức năng chính của website doanh nghiệp là giúp khách hàng tìm về nhanh chóng hơn. Nếu bạn có địa điểm thật, bạn cần chắc là mọi thứ mọi người đều đơn giản tìm được đường tới đó. Cách trực quan đặc biệt là dùng bản đồ để hiển thị hình ảnh vị trí của bạn, thay vì chỉ đơn thuần ghi ra địa chỉ.

May mắn là, bạn cũng đều có thể dễ dàng chèn bản đồ vào website. Trong bài này, chúng tôi sẽ chỉ bạn cách chèn google map vào WordPress với 3 cách khác nhau:

  1. Cài Plugin WordPress Google Maps.
  2. Nhúng code Google Maps vào website.
  3. Sử dụng WordPress theme.

Bên dưới chúng tôi sẽ cung cấp biết bao thông tin, giờ bạn hãy mở bản đồ lên và thực hiện ngay thôi!

Vì sao bạn phải chèn Google Maps vào WordPress

Google Maps

Như đã nói ở trên, việc có hình ảnh bản đồ của vị trí việc kinh doanh của bạn sẽ được lợi hơn nhiều so với việc bạn chỉ cho hiện lên dòng địa chỉ. Với bản đồ, người truy cập có thân xác định được ngay cách dễ dàng nhất để đi đến đó, bạn đang ở trên đường nào.

Chọn loại bản đồ thì cũng đều có nhiều cách. Một số chỉ chụp hình màn hình vị trí từ Google Maps hoặc các bản đồ trên mạng. Một số khác sử dụng bản đồ có độ tương tác trực tiếp từ Google Maps vì tính năng này miễn phí.

Đây là các lý do vì sao bạn cần chèn Google Maps vào WordPress:

  • Có tính tương tác cao, khách truy cập cũng có thể di chuyển xung quanh bản đổ để định vị tốt hơn.
  • Bạn cũng đều có thể dùng Google Maps để làm nổi bật một hoặc nhiều vị trí bạn muốn.
  • Khách truy cập cũng có thể đổi giữa maps và street views để xem trên thực tế nó trông như thế nào mà không phải ra khỏi nhà.
  • Khách truy cập cũng có thể có thể đơn giản chuyển bản đồ tới điện thoại, lưu lại chỉ dẫn chỉ đường trên điện thoại.

Dĩ nhiên, cũng có nhiều dịch vụ bản đồ khác cạnh bên Google Maps. Tuy nhiên, Google có rất nhiều ưu thế so với các đối thủ do có lượng người sử dụng cực lớn. Hầu hết mọi người đã quen cách dùng Google Maps, nên cũng không gây khó khăn gì cho họ nếu nó hiện lên trên website của bạn.

Tin xấu là WordPress không có chức năng mặc định để thêm Google Maps vào site của bạn. Vì vậy, bạn phải sử dụng plugins, theme hoặc chức năng nhúng bản đồ chính thức của Google.

Làm thế nào để chèn Google Maps vào WordPress (3 cách)

Giờ, chúng tôi kỳ vọng đã thuyết phục được bạn sử dụng Google Maps. Phần còn sót lại của bài viết, chúng tôi sẽ đi qua các cách để thiết lập bản đồ lên website của bạn. Bắt đầu với cách chèn bản đồ bằng plugin, đến thêm bản đồ thủ công, và cuối cùng là sử dụng chức năng của theme. Hãy bắt đầu thôi nhé!

1. Cài đặt plugin WordPress Google Maps

Google Maps là một tính năng thông dụng đến mức có rất nhiều plugin bổ trợ việc này.

Ví dụ như WP Google Maps bạn có thể chèn bản đồ vào trang qua shortcode. Hơn nữa, plugin này cũng giúp bạn tùy chỉnh map markers, thiết kế và nhiều thứ khác nữa:

wp google maps

Đối với khuyến nghị của chúng tôi, WP Google Maps là chọn lựa tốt nhất, vì nó bổ trợ các chức năng tiên tiến như tương thích với nhiều loại plugin cache khác nhau, và Content Delivery Networks (CDNs).

Dĩ nhiên bạn có thể dùng plugin khác. VÍ dụ như plugin WD Google Maps đây là chọn lựa ưu việc. Ngoài việc nó hỗ trợ nhiều markets, nó còn hỗ trợ trang thân thiện với di động:

WD Google Maps

Khi bạn chèn google map vào WordPress bằng WD Google Maps, plugin này sẽ được chỉ dẫn mỗi bước và còn có cả trang xem trước.

Cuối cùng, Google Maps Widget cũng chính là một plugin Google Maps WordPress tốt. Đặc biệt nó rất dễ cài đặt. Nó giúp tạo nên một map dạng thumbnail chèn vào sidebar của WordPress (hoặc bên dưới footer), khách truy cập có thể phóng to ra khi click vào:

Plugin Google Maps Widget.

Công cụ này dành riêng cho các website không có nhiều không gian, vì thế widget là chọn lựa tốt nhất vì có thể chèn ở mọi nơi.

Tuy nhiên, đối với những site kinh doanh, bạn cần một bản đồ kích cỡ đầy đủ. Nên giờ, để làm tỉ dụ trong phần này, chúng tôi sẽ sử dụng WP Google Maps plugin để chèn google Maps vào WordPress.

Đầu tiên, đăng nhập vào trang admin dashboard WordPress và chuyển tới tab Plugins › Add New . Dùng thanh tìm kiếm gõ chữ WP Google Maps . Khi bạn thấy nó hiện lên kết quả tìm kiếm, hãy nhấn và nút Install Now :

Cai dat WP google maps  Kích hoạt plugin này bằng cách nhấn vào nút Activate. Rồi tab Maps sẽ hiện lên trên dashboard của bạn. Click vào đó, plugin sẽ hiển thị trang giới thiệu. Tuy nhiên, bạn cũng có thể có thể nhấn nút Skip intro and create a map để bỏ qua:

trang giới thiệu plugin bản đồ

Ở trang kế tiếp, plugin sẽ thông báo bạn phải một Google API key. Tiếp tục nhận API key bằng cách click chuột vào link Create an API key now .

tạo api key

Google sẽ hỏi bạn đồng ý điều khoản để tạo app nhận API key. Khi bạn đồng ý, Google sẽ tạo dự án mới cho bạn để bạn cũng có thể có thể tạo API key.

Protips: Hướng dẫn tạo Google Maps API key:

1. Chuyển tới Google Maps Platform và click vào nút Get Started .

2. Kích hoạt Google Maps Platform

Chọn Maps, Routes và Places rồi nhấn tiếp tục:

kích hoạt google maps platform

3. Tạo dự án (Project) trước mắt

tạo dự án google maps
Đặt tên Project. Nhấn next.

4. Cài đặt thông tin phải trả

5. Tạo API Credentials

Nhấn vào nút Credentials trong menu API Manager trong thanh sidebar bên trái trong Google Maps Console Platform

credentials google maps api

6. Chọn Create Credentials trong tab Credentials với tùy chọn API keys:

tạo api keys google maps

7. Màn hình sẽ hiện ra API key bạn vừa tạo:

ví dụ api key

Chúng ta lấy API key ở đây, và bạn đừng nên chia sẽ API key với bất kỳ ai khác. Vì nó liên kết với tài khoản của bạn. API keys gồm chữ và số.Bạn cũng có thể đáp ứng an toàn bằng cách bấm vào nút Restrict Keys để thiết lập chế độ bảo mật cho API keys này

Chèn API keys vào plugin bản đồ WordPress

Sau đó bạn quay về và dán API key vào nơi plugin yêu cầu:

dán api key

Bạn sẽ thấy thông báo thành công, giờ bạn cũng có thể tiếp tục và thiết lập bản đồ đầu tiên của bạn:

bản đồ đầu tiên

Như bạn thấy ở trên, plugin sẽ tạo map mẫu cho bạn, để bạn có thể chỉnh sửa và sử dụng trên website. Để làm vậy, nhấn vào nút Edit bên dưới tên map. Giờ plugin sẽ hỏi bạn nền tảng nào bạn mong muốn dùng bản đồ. Hãy chọn Google Maps:

chọn maps engine

Hãy đặt tên bản đồ trước, rồi điểu chỉnh bề dài rộng. Mặc định nó sẽ tạo bản đồ 100% tùy vào độ sắc nét website của bạn, vì thế nó gần như là lựa chọn tốt nhất:

tên bản đồ

Bạn cũng sẽ nhìn thấy lựa chọn để chỉnh độ zoom của bản đồ, và chọn loại layout. Ví dụ, bạn có thể dùng classic roadmaps hoặc terrain maps. Hãy cứ chọn bản đồ thường, vì mọi người sử dụng nó nhiều nhất.

Tiếp theo, tới phần Markers . Tại đây, bạn cũng đều có thể chỉ xác định trí bạn mong muốn bản đồ hiển thị, bằng phương pháp gõ vào tọa độ GPS. Bạn cũng có thể di chuyển xung quanh, rồi bấm chuột phải vào vị trí bạn mong muốn đánh dấu:

đánh dấu vị trí

Bên dưới cấu hình Address/GPS , bạn sẽ thấy chọn lựa Animation cho bản đồ. Ví dụ bạn mong muốn thêm hiệu ứng nảy lên khi bản đồ được tải, vậy hãy dùng hiệu ứng Bounce. Bạn cũng đều có thể tùy chỉnh bản đồ Google để hiển thị ô pop-up ngay kế bên marker để nhập địa chỉ đầy đủ.

Khi bạn đã hoàn tất, nhấn vào nút Save Marker để tải lại trang. Rồi tiếp tục nhấn vào nút Save Map chính giữa màn hình, plugin sẽ lưu toàn bộ thay đổi.

Bạn cũng cũng có thể nhúng google map vào website bằng phương pháp dán shortcode của nó ở bất kỳ nơi nào trên site. Để lấy shortcode của bản đồ, hãy vào trong tab Maps, nó ở ngay cạnh tên bản đồ:

shortcode của bản đồ

Vậy là xong! Bạn đã thêm thành công Google Map trước mắt vào WordPress của bạn. Với plugin này (và những plugin giống vậy), bạn cũng đều có thể tạo ra hàng lọa maps nếu muốn.

2. Chèn Google Maps vào WordPress website bằng tính năng embed của Google

Nếu bạn không thích dùng plugin, bạn cũng có thể chèn Google Maps vào WordPress bằng tính năng có sẵn của Google.

Đầu tiên, bạn lấy code Maps của bạn bằng một dịch vụ online. Bạn có thể dùng Embed Google Map, nó lấy code bằng giao diện mặc định của Google Maps, giúp bạn thiết lập kích cỡ và tỉ lệ. Bạn chỉ cần nhập địa chỉ vào phần Enter Your Address như hình bên dưới:

embed google maps

Thứ hai, sau khi vừa ý với thiết lập, bạn nhấn nút nút Get HTML-Code để site này tạo nên code HTML code snippet của Maps để bạn tự chèn vào website.

code nhúng của google maps

Thứ ba, copy đoạn code ở trên, sau đó quay về WordPress dashboard. Rồi mở editor lên ở trang nào bạn muốn hiện bản đồ lên. Nhấn vào ô Text , dán code HTML của Google Maps vào địa thế cần thiết rồi lưu lại thay đổi:

làm thế nào tìm thấy chúng tôi

Cuối cùng, coi lại trang web bạn sẽ thấy Google Maps đã được nhúng lên Web sửa máy tính ITS:

ví dụ bản đồ wordpress

Lưu ý: điểm yếu của cách đây là nó bạn phải dán nhiều đoạn mã nhúng vào website cho từng bản đồ. Điểm mạnh là bạn có thể thêm bản đồ bằng HTML, nó sẽ đơn giản nhìn thấy trong tab Visual :

visual tab

Việc này sẽ giúp bạn dễ nhìn hơn và không phải chuyển ngược lại Text .

3. Chèn bản đồ bằng WordPressTheme

WordPress Google Maps phổ biến đến độ có nhiều themes đã kích hoạt sẵn chức năng này mặc định. Có tức là nếu bạn dùng theme đúng, bạn chẳng cần cài plugin hay dùng HTML code để chèn bản đồ.

Thường các theme premium đều bổ trợ tính năng này, nên cũng có thể có thể bạn sẽ mất ít phí. Dĩ nhiên, lý do chính bạn mua theme chẳng cần là vì nó bổ trợ bản đồ mà còn vì các lý do quan trọng khác.

Nếu không biết bắt đầu từ đâu, hãy cứ chọn multipurpose WordPress themes (theme đa chức năng) để làm. Những theme này thường có kèm biết bao chức năng, để bạn có thể dựng bất kỳ site nào bạn muốn.

Một trong số các theme đa chức năng thông dụng nhất là Divi. Theme này có nhiều điểm mạnh, bao gồm giao diện builder:

giao diện divi builder

Khi bạn tạo xong trang bằng the Divi Builder, bạn có thể chia chúng ra thành dòng và cột. Rồi theme modules vào:

ví dụ modules

Nếu bạn tinh mắt, bạn đã nhận biết có một modules xem là Map . Click vào nó, theme này sẽ hỏi bạn nhập Google API key.  Nếu không có, hãy cứ dùng cách 1 để làm như chúng tôi chỉ dẫn phía trên để lấy Google API key.

Rồi bạn dán API key vào, bạn có thể chọn vị trí maps, và thêm các markers vào nếu bạn muốn:

thêm đánh dấu vị trí Các chương trình bổ trợ WordPress Google Maps out là Travelmatic, Estato, và Reales WP. Nó rất phổ biến trong những themes về bất động sản và du lịch, nhưng nếu chọn thì bạn cũng đơn giản tìm kiếm được các themes cho loại website khác.

Lời kết

Không có cách nào tốt hơn để chia sẽ địa chỉ của bạn hơn là sử dụng bản đồ tương tác. Google Maps sẽ giúp cho mọi người dễ tìm địa thế của bạn hơn, có nghĩa rằng họ sẽ sớm tới gặp bạn hơn để. Hơn nữa, việc chèn google map vào WordPress cũng rất đơn giản, và có nhiều cách để làm.

Bạn có bất kỳ thắc mắc nào với việc sử dụng WordPress Google Maps trên trang web của bạn không? Hãy cứ tự nhiên liên hệ với chúng tôi ở mục bình luận bên dưới nhé!

Từ khóa bài viết: dinhthuanit.com,

Bài viết Cách chèn Google Map vào WordPress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang