lam the nao tim thay chung toi
Web development WordPress Thủ thuật Th12 05, 2019Hai G .8 tối thiểu Đọc

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

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

Một trong những chức năng chính của website doanh nghiệp là giúp khách hàng tìm đến nhanh chóng hơn. Nếu bạn có địa chỉ thật, bạn cần chắc là tất cả mọi người đều dễ dàng tìm được đường tới đó. Cách trực quan nhấ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 hoàn toàn có thể thuận tiện 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ẽ phân phối rất nhiều thông tin, giờ bạn hãy mở bản đồ lên và triển khai ngay thôi !

Vì sao bạn cần 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 thương mại 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 đồ, khách truy vấn hoàn toàn có thể xác định được ngay cách dễ nhất để đi tới đó, bạn đang ở trên đường nào .Chọn loại bản đồ thì cũng có nhiều cách. Một số chỉ chụp ảnh màn hình hiển thị vị trí từ Google Maps hoặc những bản đồ trên mạng. Một số khác sử dụng bản đồ có tính tương tác trực tiếp từ Google Maps vì tính năng này không tính tiền .Đây là những nguyên 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ó thể di chuyển xung quanh bản đổ để định vị tốt hơn.
  • Bạn 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ó 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 rời khỏi nhà.
  • Khách truy cập có thể có thể dễ dàng chuyển bản đồ tới điện thoại, lưu lại hướng 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 bên cạnh Google Maps. Tuy nhiên, Google có rất nhiều lợi thế so với những đối thủ cạnh tranh do có lượng người dùng cực lớn. Hầu hết mọi người đã quen cách sử dụng Google Maps, nên cũng không gây khó khăn vất vả 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ó tính năng mặc định để thêm Google Maps vào site của bạn. Vì vậy, bạn cần sử dụng plugins, theme hoặc công dụ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 lại của bài viết, chúng tôi sẽ đi qua những 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 đồ bằng tay thủ công, và sau cuối là sử dụng tính năng của theme. Hãy khởi đầu thôi nhé !

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

Google Maps là một tính năng phổ cập đến mức có rất nhiều plugin tương hỗ việc này .Ví dụ như WP Google Maps bạn hoàn toà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, phong cách 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à lựa chọn tốt nhất, vì nó tương hỗ những tính năng tiên tiến và phát triển như thích hợp với nhiều loại plugin ca che khác nhau, và Content Delivery Networks ( CDNs ) .Dĩ nhiên bạn hoàn toàn có thể dùng plugin khác. VÍ dụ như plugin WD Google Maps này là lựa chọn ưu việc. Ngoài việc nó tương hỗ nhiều markets, nó còn tương hỗ 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ó hướng dẫn từng bước và còn có cả trang xem trước .Cuối cùng, Google Maps Widget cũng là một plugin Google Maps WordPress tốt. Đặc biệt nó rất dễ setup. Nó giúp tạo ra một map dạng thumbnail chèn vào sidebar của WordPress ( hoặc bên dưới footer ), khách truy vấn hoàn toàn có thể phóng to ra khi click vào :

Plugin Google Maps Widget.

Công cụ này dành cho những website không có nhiều khoảng trống, thế cho nên widget là lựa chọn tốt nhất vì hoàn toàn có thể chèn ở mọi nơi .Tuy nhiên, so với những site kinh doanh thương mại, bạn cần một bản đồ kích cỡ khá đầy đủ. Nên giờ, để làm ví 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ó 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 cần 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 ý chấp thuận lao lý để tạo app nhận API key. Khi bạn đồng ý chấp thuận, Google sẽ tạo dự án Bất Động Sản mới cho bạn để bạn hoàn toàn 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 PlatformChọn Maps, Routes và Places rồi nhấn liên tục :

kích hoạt google maps platform

3. Tạo dự án Bất Động Sản ( Project ) tiên phong

tạo dự án google maps

4. Cài đặt thông tin giao dịch thanh toán5. 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ể đảm bảo an toàn bằng cách nhấn 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 lại và dán API key vào nơi plugin nhu yếu :

dán api key

Bạn sẽ thấy thông tin thành công xuất sắc, giờ bạn hoàn toàn có thể liên tục và thiết lập bản đồ tiên phong 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 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 chiều dài rộng. Mặc định nó sẽ tạo bản đồ 100 % tùy vào độ phân giải website của bạn, thế cho nên 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 hoàn toàn có thể dùng classic roadmaps hoặc terrain map. Hãy cứ chọn bản đồ thường, vì mọi người dùng nó nhiều nhất .

Tiếp theo, tới phần Markers. Tại đây, bạn có thể chỉ định vị trí bạn muốn bản đồ hiển thị, bằng cách gõ vào tọa độ GPS. Bạn có thể di chuyển xung quanh, rồi click chuột phải vào vị trí bạn 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 lựa chọn Animation cho bản đồ. Ví dụ bạn 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 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ó thể nhúng google map vào website bằng cách 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 xuất sắc Google Map tiên phong vào WordPress của bạn. Với plugin này ( và những plugin giống vậy ), bạn hoàn toàn có thể tạo ra hàng lọa map 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 hoàn toàn 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ụ trực tuyến. Bạn hoàn toà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 size 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 ưng ý với thiết lập, bạn nhấn nút nút Get HTML-Code để site này tạo ra 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 lại 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 vị trí 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, xem lại website bạn sẽ thấy Google Maps đã được nhúng lên website :

ví dụ bản đồ wordpress

Lưu ý: điểm yếu của cách này là nó bạn cần 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ẽ dễ dàng 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 thông dụng đến độ có nhiều themes đã kích hoạt sẵn công dụng này mặc định. Có nghĩa là nếu bạn dùng theme đúng, bạn không cần cài plugin hay dùng HTML code để chèn bản đồ .Thường những theme premium đều tương hỗ tính năng này, nên hoàn toàn có thể bạn sẽ mất ít phí. Dĩ nhiên, nguyên do chính bạn mua theme không phải là vì nó tương hỗ bản đồ mà còn vì những nguyên do quan trọng khác .Nếu không biết mở màn từ đâu, hãy cứ chọn multipurpose WordPress themes ( theme đa tính năng ) để làm. Những theme này thường có kèm rất nhiều tính năng, để bạn hoàn toàn có thể dựng bất kể site nào bạn muốn .Một trong số những theme đa tính năng phổ cập nhất là Divi. Theme này có nhiều điểm mạnh, gồm có giao diện builder :

giao diện divi builder

Khi bạn tạo xong trang bằng the Divi Builder, bạn hoàn toà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 ra có một modules gọi 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 hướng dẫn ở trên để lấy Google API key.

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

thêm đánh dấu vị tríCác chương trình hỗ trợ WordPress Google Maps out là Travelmatic, Estato, và Reales WP. Nó rất phổ biến trong các themes về bất động sản và du lịch, nhưng nếu tìm thì bạn cũng dễ dàng tì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 vị trí của bạn hơn, đồng nghĩa tương quan với việc 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 thuần, và có nhiều cách để làm .Bạn có bất kể vướng mắc nào với việc sử dụng WordPress Google Maps trên website của bạn không ? Hãy cứ tự nhiên liên hệ với chúng tôi ở mục phản hồi bên dưới nhé !Author

Tác giả

Hai G .Hải G. là chuyên viên quản trị, quản lý và vận hành những dịch vụ website. Anh có nhiều năm kinh nghiệm tay nghề về VPS, Hosting, technical SEO, CMS. Đặc biệt yêu quý WordPress và đã dùng nó hơn 5 năm nay. Sở thích của anh là đọc, viết blog, đi du lịch và tư vấn cho những bạn trẻ khởi nghiệp .

Leave a Reply

Email của bạn sẽ không được hiển thị công khai.