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 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:
- Cài Plugin WordPress Google Maps.
- Nhúng code Google Maps vào website.
- Sử dụng WordPress theme.
Bên dưới chúng tôi sẽ cung cấp rất nhiều 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 cần chèn Google Maps vào WordPress
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 đồ, khách truy cập có thể định vị đượ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 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ính 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ó 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 các đối thủ 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 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 cần 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 hy 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 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 phổ biến đến mức có rất nhiều plugin hỗ 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:
Đố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ó hỗ 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 này là lựa chọn ư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:
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ễ cài đặt. 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 cập có thể phóng to ra khi click vào:
Công cụ này dành cho những website không có nhiều không gian, vì vậy widget là lựa chọn 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 thước đầ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:
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 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.
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ó 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:
3. Tạo dự án (Project) đầu tiên
4. Cài đặt thông tin thanh toán
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
6. Chọn Create Credentials trong tab Credentials với tùy chọn API keys:
7. Màn hình sẽ hiện ra API key bạn vừa tạo:
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 yêu cầu:
Bạn sẽ thấy thông báo thành công, giờ bạn có thể tiếp tục và thiết lập bản đồ đầu tiên của bạ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:
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, vì vậy nó gần như là lựa chọn tốt nhất:
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 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:
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 đồ:
Vậy là xong! Bạn đã thêm thành công Google Map đầu tiên vào WordPress của bạn. Với plugin này (và những plugin giống vậy), bạn 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ó 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 thướ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:
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.
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:
Cuối cùng, xem lại trang web bạn sẽ thấy Google Maps đã được nhúng lên website:
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:
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ó 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 các theme premium đều hỗ trợ tính năng này, nên có thể bạn sẽ mất ít phí. Dĩ nhiên, lý do chính bạn mua theme không phải là vì nó hỗ 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 rất nhiều 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 phổ biến nhất là Divi. Theme này có nhiều điểm mạnh, bao gồm giao diện 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:
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 có thể chọn vị trí maps, và thêm các markers vào nếu bạn muốn:
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 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 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é!
105 Comments
Aannlouse
19 November, 2021
ivermectin to treat covid ivermectin dosage for chickens
DnsnAcuth
19 November, 2021
tadalafil vs cialis reviews tadalafil 30mg liquid
2cooperative
17 February, 2022
2epidemics
Charleslip
19 February, 2022
https://stromectolst.com/# ivermectin 10 mg
ivermectin 50 mg
Charleslip
19 February, 2022
http://stromectolst.com/# ivermectin 10 mg
stromectol how much it cost
Charleslip
19 February, 2022
https://stromectolst.com/# ivermectin nz
ivermectin oral solution
Charleslip
19 February, 2022
https://stromectolst.com/# ivermectin pills canada
ivermectin price comparison
Charleslip
19 February, 2022
https://stromectolst.com/# ivermectin 3
ivermectin lice oral
Charleslip
19 February, 2022
http://stromectolst.com/# stromectol pills
stromectol order online
Charleslip
19 February, 2022
http://stromectolst.com/# ivermectin 12
ivermectin price usa
Charleslip
19 February, 2022
http://stromectolst.com/# ivermectin price comparison
buy ivermectin pills
Charleslip
19 February, 2022
http://stromectolst.com/# ivermectin human
ivermectin over the counter canada
Charleslip
19 February, 2022
http://stromectolst.com/# where to buy ivermectin pills
stromectol ivermectin tablets
Charleslip
19 February, 2022
http://stromectolst.com/# stromectol ivermectin
stromectol ivermectin
Charleslip
20 February, 2022
http://stromectolst.com/# generic ivermectin for humans
buy ivermectin for humans uk
Stevensleli
21 February, 2022
https://stromectolis.com/# stromectol pills
Stevensleli
21 February, 2022
https://stromectolis.com/# stromectol without prescription
Stevensleli
21 February, 2022
https://stromectolis.com/# generic ivermectin for humans
Stevensleli
21 February, 2022
https://stromectolis.com/# ivermectin 2%
Stevensleli
22 February, 2022
https://stromectolis.com/# ivermectin tablets uk
Stevensleli
22 February, 2022
https://stromectolis.com/# ivermectin tablets
StevenBoant
2 March, 2022
how to get viagra without a prescription viagra vs cialis forum is there anything over the counter that works like viagra?
StevenBoant
2 March, 2022
what milligrams does viagra come in over the counter viagra substitute walgreens how long before sex do you take viagra
StevenBoant
3 March, 2022
what does viagra do to women buy viagra online without prescriptions п»їhow long does it take for a 100mg viagra to kick in?
Russellesogs
5 March, 2022
hydroxychloroquine 200 mg plaquenil alternatives hydroxychloroquine medicine
Russellesogs
6 March, 2022
plaquenil 200mg price hydroxychloroquine over the counter walgreens plaquenil manufacturer
Russellesogs
6 March, 2022
hydroxychloroquine price per pill plaquenil lupus weight loss plaquenil and pregnancy
Russellesogs
6 March, 2022
molnupiravir vs paxlovid paxlovid price what is paxlovid made from
Russellesogs
8 March, 2022
molnupiravir merck kaufen molunpiravir molnupiravir in bangladesh
Russellesogs
8 March, 2022
buy ivermectin for humans uk stromectol tablets ivermectin 20 mg
Russellesogs
9 March, 2022
pfizer covid drug paxlovid beipackzettel plaxovid
Russellesogs
9 March, 2022
paxlovid cost paxlovid wiki paxlovid drug interactions list
Russellesogs
10 March, 2022
molnupiravir 200 mg molnupiravir online molnupiravir order
Marcusmot
16 March, 2022
how much 1.87 ivermectin for horses do i give 15 lb dog ivermectin mechanism of action in scabies worming chickens with ivermectin
Marcusmot
16 March, 2022
tractor supply ivermectin for dogs ivermectin pills ivermectin for guinea pig lice
Marcusmot
17 March, 2022
where can i buy ivermectin for cats ivermectin for budgies does oral ivermectin kill demodex mites
Marcusmot
17 March, 2022
how to take ivermectin ivermectin for dogs with mange ivermectin dosage dogs
Marcusmot
19 March, 2022
who ivermectin topical ivermectin for ear mites in cats ivermectin ticks
Marcusmot
19 March, 2022
ivermectin australia 2021 deworming chickens with ivermectin buy ivermectin pill
Marcusmot
20 March, 2022
ivermectin lotion stromectol for sale how much ivermectin to give a goat
Marcusmot
20 March, 2022
ivermectin scabies dosage equine ivermectin paste ivermectin side effects
DavidTon
21 March, 2022
doxycycline buy no prescription doxycycline 100mg online doxycycline 150 mg cost
DavidTon
23 March, 2022
where to buy doxycycline in singapore doxycycline buy canada doxycycline 20mg canada
DavidTon
24 March, 2022
medicine amoxicillin 500 amoxicillin online canada how much is amoxicillin
DavidTon
25 March, 2022
clomid from mexico buy clomid online from canada HomePage
Jasonemams
27 March, 2022
how much is clomid in south africa buy clomid usa clomid clomiphene
Jasonemams
29 March, 2022
buy clomid online safely uk can you buy clomid over the counter us buy clomid 50mg uk
Jaspulp
3 April, 2022
cialis egypt cialis with daxopretine free cialis samples canada
DadEnuby
6 April, 2022
teva ivermectin cream ivermectin pharmacy ivermectin 1%cream
RichardJeork
9 April, 2022
what does cialis cost generic cialis paypal payment what\’s works better viagra or cialis?
JosephLep
12 April, 2022
doxycycline in mexico doxycycline 20 doxycycline cost in india
JosephLep
14 April, 2022
doxycycline price singapore doxycycline for sale online uk buy doxycycline capsules
JosephLep
15 April, 2022
cheap doxycycline online buy doxycycline 100mg capsules doxycycline brand name india
JosephLep
16 April, 2022
order prednisone 10mg online order prednisone 10mg prednisone over the counter south africa
Jasonhaits
18 April, 2022
how to overcome ed naturally do i have ed cheap pet meds without vet prescription
Jasonhaits
19 April, 2022
buy amoxicillin online cheap amoxicillin over counter amoxicillin over the counter in canada
Victorcault
22 April, 2022
buy prescription drugs online without ed problems treatment cat antibiotics without pet prescription
Victorcault
23 April, 2022
best online canadian pharmacy home remedies for erectile dysfunction ed dysfunction treatment
RobertRak
28 April, 2022
vcialis how to buy cialis us generic cialis, no prescription, paypal
RobertRak
29 April, 2022
male erection pills best way to treat ed male dysfunction pills
RobertRak
2 May, 2022
prednisone online for sale prednisone 500 mg tablet fast shipping prednisone
Nathanthype
6 May, 2022
cheap cialis canada best price for daily cialis cialis on line australia
Nathanthype
7 May, 2022
online prednisone 6 prednisone prednisone cost 10mg
Nathanthype
8 May, 2022
prednisone 20mg buy online order prednisone prednisone tabs 20 mg
Nathanthype
9 May, 2022
online drugstore homepage homepage
Nathanthype
10 May, 2022
how to treat ed ed natural treatment cheap erectile dysfunction pill
Richardarrob
12 May, 2022
ed pills online pills erectile dysfunction treatment of ed
Richardarrob
13 May, 2022
best non prescription ed pills best canadian online pharmacy canadian medications
Richardarrob
14 May, 2022
medicine erectile dysfunction ed pills that work ed pill
Richardarrob
15 May, 2022
prescription drugs without prior prescription buy anti biotics without prescription how to get prescription drugs without doctor
Pillarrob
17 May, 2022
buy medication online from india online pharmacy india cheap generic drugs from india
zmotdqiy
18 May, 2022
purchase provigil pill modafinil 100mg generic
eypgmyua
18 May, 2022
order generic modafinil 100mg buy generic provigil 100mg
nchtsqno
18 May, 2022
order modafinil pills provigil 100mg canada order modafinil for sale
dfuxfmyo
18 May, 2022
modafinil 200mg usa order modafinil 200mg
wolewxdw
18 May, 2022
is erythromycin safe during pregnancy https://erythromycin1m.com/#
Pillarrob
18 May, 2022
stromectol for sale prescribing stromectol stromectol 12 mg tablets
otnvxrwd
19 May, 2022
modafinil 200mg us buy modafinil 100mg online cheap cost provigil
Robinrog
20 May, 2022
clomid for sale buy clomid 50mg online buy clomid
anuahaqh
20 May, 2022
buy provigil 200mg pill
qswcjwmy
20 May, 2022
cheap provigil 200mg order modafinil without prescription
laternmb
20 May, 2022
provigil 100mg price modafinil 200mg pill
nuvandxv
20 May, 2022
order provigil 100mg generic modafinil cost provigil buy online
Robinrog
21 May, 2022
stromectol for humans for sale ivermectin without a doctor prescription ivermectin without a doctor prescription
urjwwcbq
21 May, 2022
buy modafinil for sale buy provigil 100mg online
Robinrog
22 May, 2022
stromectol for humans for sale stromectol 12 mg tablets stromectol price usa
xhquufiq
22 May, 2022
provigil cheap order modafinil 200mg provigil medication
vtloraoc
22 May, 2022
order modafinil 100mg online cheap modafinil 200mg cheap
kdpkpofk
22 May, 2022
modafinil pills
mjpnynmm
22 May, 2022
brand provigil modafinil 100mg oral
rkdjucuz
23 May, 2022
erythromycin topical gel erythromycin ethylsuccinate
Stephencob
24 May, 2022
stromectol tablets for humans stromectol 3 mg tablets price stromectol for humans for sale
Ronnieboila
26 May, 2022
п»їviagra pills viagra tablets for men best place to buy generic viagra online
cigzrasp
27 May, 2022
erythromycin allergy http://erythromycin1m.com/#
jifvsuin
30 May, 2022
erythromycin pregnancy erythromycin ophthalmic ointment for newborns
ufhdznnh
2 June, 2022
erythromycin definition erythromycin base 250mg
ttyritxd
6 June, 2022
erythromycin 500mg
lifpczge
10 June, 2022
erythromycin oint https://erythromycinn.com/#
bahis siteleri
10 June, 2022
perfect
thank you for a very good article
sproisoc
14 June, 2022
how to get off plaquenil cheap hydroxychloroquine
kjybpicn
17 June, 2022
do you need a prescription for hydroxychloroquine
ahvpqabg
21 June, 2022
hydroxychloroquine tablets hydroxychloroquine for sale online
efepxxko
24 June, 2022
https://www.hydroxychloroquinex.com/ hydroxychloroquine for sale from canada
KatineElon
29 June, 2022
viva max free voucher code
poker slots free
free slots world casino
AurlieElon
5 July, 2022
slots garden
all free casino slots
play slots online for real money