Bỏ qua đến nội dung chính

My Maps location: Vị trí & Danh mục

1. Lấy mã API của Google Maps

Mỗi lần bạn sử dụng API Google Maps, nếu tên miền của bạn được tạo sau ngày 22 tháng 6 năm 2016, bạn phải cung cấp một khóa để xác thực yêu cầu của mình.
Lấy khóa và kích hoạt API: https://developers.google.com/maps/documentation/javascript/get-api-key

Thông tin chi tiết hơn: https://developers.google.com/maps/documentation/javascript/usage?hl=en

Bước đầu tiên là tạo một dự án và sau đó nhập tên dự án.

 

tạo khóa API

 

Nếu tôi muốn cho phép tất cả các yêu cầu từ tên miền của mình, thì mẫu cần tuân theo là *.joomunited.com/*.
Nếu bạn chỉ muốn cho phép một tên miền duy nhất, ví dụ như mydomain.com, thì mẫu sẽ là joomunited.com/*.


Trên môi trường localhost, bạn có thể sử dụng bất kỳ khóa hợp lệ nào và nó sẽ hoạt động mà không cần tham chiếu đến tên miền.

 

mẫu API miền


Sau đó, khóa API sẽ được tạo ra, đây là khóa bạn cần sao chép để thêm vào My Maps location.

 

API đã được tạo

 

Thêm khóa vào My Maps Location.

Từ mục Components > My Maps Location > Option view , bạn có thể thêm một khóa vào phần cấu hình.

 

cấu hình bản đồ

 

Dán khóa.

 

thêm khóa API

 

Hướng dẫn viết sơ yếu lý lịch từng bước:


Vậy các bước tôi thực hiện là:

  • Truy cập vào Bảng điều khiển API của Google
  • Tạo hoặc chọn một dự án
  • Nhấp vào Tiếp tục để kích hoạt API và bất kỳ dịch vụ liên quan nào.
  • Trên trang Thông tin xác thực, hãy lấy khóa trình duyệt (và thiết lập Thông tin xác thực API).
  • Để ngăn chặn hành vi đánh cắp hạn mức, hãy bảo mật khóa API của bạn theo các phương pháp tốt nhất sau đây.

2. Quản lý các danh mục vị trí

Vị trí được phân loại thành các nhóm. Các nhóm này có thể được hiển thị dưới dạng bộ lọc ở frontend hoặc được sử dụng làm tham số được xác định trước trong mục menu để tải một số vị trí được phân loại.
 

bộ lọc danh mục-frontend

 

Nếu bạn có nhiều địa điểm, nên sử dụng danh mục. Bạn có thể tạo danh mục và danh mục con.
Để tạo danh mục, vui lòng vào My Maps location > Danh mục và nhấp vào Mới.

 

vị trí theo danh mục

 

Sau đó, từ màn hình danh mục, bạn cần thêm tiêu đề và danh mục cha trong trường hợp bạn muốn tạo danh mục con

 

cha của danh mục

 

Bạn cũng có thể xác định một điểm đánh dấu mặc định cho vị trí trong danh mục bằng cách sử dụng tab Chọn điểm đánh dấu.

 

danh mục đánh dấu

 

"Danh mục của tôi" được tạo mặc định, cho phép bạn bắt đầu thêm địa điểm trực tiếp sau khi cài đặt.

3. Tạo một vị trí

Để tạo địa điểm mới, vui lòng vào My Maps location > Địa điểm > Mới

Có 3 trường bắt buộc:

  • Tên địa điểm
  • Loại địa điểm
  • Thông tin địa điểm (địa chỉ)      

 

Với địa chỉ này, bạn có 3 giải pháp để thêm nó:

  • Hãy sử dụng ô tìm kiếm (khuyến nghị)
  • Di chuyển chuột trên bản đồ và dùng con trỏ để chỉ vào một vị trí
  • Điền địa chỉ (phải là địa chỉ hợp lệ trên Google Maps)

 

Để thêm địa điểm vào công cụ tìm kiếm, hãy nhập tên địa điểm bạn muốn thêm.

 

thêm vị trí

 

Khi chọn đối tượng, các trường vĩ độ và kinh độ sẽ được điền tự động. Ứng dụng bản đồ của tôi cũng được tích hợp với Google Places! Điều này có nghĩa là bạn có thể tìm kiếm một cửa hàng hoặc bất kỳ địa điểm nào khác được đăng ký trên Google Maps, ứng dụng của chúng tôi sẽ lấy được tất cả thông tin về địa điểm đó.

 

Google Place

 

 

Bạn cũng có thể di chuyển trên bản đồ và đặt điểm đánh dấu trực tiếp, kết quả sẽ tương tự và vĩ độ cùng kinh độ sẽ được tự động điền vào.

 

điểm bản đồ

 

Hãy cẩn thận với trường địa chỉ và mã bưu điện nếu bạn điền thủ công, chúng phải khớp với địa chỉ đã được xác nhận trên Google Maps.

 

trường địa chỉ

 

Tất cả các thông tin khác về địa điểm (mô tả, giờ mở cửa,...) được hiển thị trong phần chi tiết của địa điểm.

Mục liên hệ trong phần chỉnh sửa chi tiết địa điểm cho phép thêm liên kết liên hệ, địa chỉ mailto hoặc URL cho từng địa điểm. Trên frontend nó sẽ là một nút liên hệ, khi nhấn vào sẽ mở URL hoặc thực hiện hành động gửi email đến địa chỉ mailto.

 

9

 

4. Thông tin địa điểm khác

Bạn có thể thêm hình ảnh và điểm đánh dấu tại mỗi vị trí. 

  • Hình ảnh vị trí: Hình ảnh sẽ được hiển thị dưới dạng hình thu nhỏ trong chú thích của vị trí và ở kích thước lớn hơn trên trang chi tiết vị trí.
  • Sử dụng biểu tượng danh mục: Sử dụng biểu tượng mà bạn đã đặt trong trường danh mục của vị trí trên bản đồ của tôi.
  • Màu nền bút đánh dấu: chọn màu cho màu nền bút đánh dấu của bạn.
  • Điểm đánh dấu sẽ được hiển thị trên bản đồ dưới dạng biểu tượng điểm đánh dấu vị trí. Bạn cũng có một số bộ điểm đánh dấu vị trí đẹp mắt được bao gồm trong extension My Maps Location .
  • Tùy chọn "Sử dụng liên kết tùy chỉnh" sẽ ghi đè liên kết đến chi tiết vị trí bằng một URL tùy chỉnh.

 

vị trí hình ảnh đánh dấu

 

My Maps location đang sử dụng tính năng đa ngôn ngữ tích hợp sẵn của Joomla. Bạn có thể xác định ngôn ngữ trong các danh mục vị trí và trong chính vị trí đó. Khi chuyển đổi ngôn ngữ, các vị trí sẽ được lọc giống như bất kỳ nội dung Joomla nào khác để hiển thị nội dung đã được phê duyệt bằng ngôn ngữ đó.

 

ngôn ngữ

 

Trường mô tả địa điểm là một trong những trường quan trọng nhất.
Nó sẽ được hiển thị trên trang chi tiết địa điểm và, tùy thuộc vào giao theme , như một đoạn văn giới thiệu địa điểm trong kết quả tìm kiếm. Quan trọng hơn, phần mô tả là một trình soạn thảo WYSIWYG với tất cả các plugin được tải bên trong, có nghĩa là bạn có thể thêm bất cứ thứ gì bạn muốn vào đó (hình ảnh, video...).

 

mô tả vị trí

 

Đây là đoạn văn giới thiệu hiển thị trong kết quả tìm kiếm địa điểm.

 

kết quả văn bản theo vị trí

 

Trường thẻ (tag) sử dụng cùng hệ thống thẻ như Joomla. Bạn có thể thêm thẻ và thẻ con, sau đó tải chúng lên frontend dưới dạng bộ lọc. Để quản lý tất cả các thẻ, chỉ cần tải thành phần thẻ của Joomla: Thành phần Menu > Thẻ.
Trên frontend , tùy thuộc vào cấu hình, các thẻ có thể được hiển thị dưới dạng hộp kiểm (như bên dưới) hoặc dưới dạng danh sách thả xuống.

 

bộ lọc thẻ

 

My Maps Location có thêm các trường để điền thông tin meta (cho công cụ tìm kiếm). Các trường này được tải trên trang chi tiết vị trí.

 

siêu thông tin

 

5. Hiển thị vị trí trên frontend

Để hiển thị vị trí của bạn trên frontend , bạn có thể sử dụng:

  • Menu hiển thị công cụ tìm kiếm địa điểm, địa điểm đơn lẻ hoặc danh mục địa điểm
  • Một mô-đun để hiển thị trường tìm kiếm hoặc chọn một tập hợp các vị trí
  • Nút chỉnh sửa để hiển thị một hoặc nhiều vị trí trong bất kỳ trình chỉnh sửa nào

Tải vị trí từ menu

Từ trình quản lý menu Joomla, thêm một phần tử và chọn loại là “Tìm kiếm và hiển thị vị trí”. Thao tác này sẽ hiển thị công cụ tìm kiếm vị trí với các bộ lọc.
Chọn “Xem chi tiết vị trí” để hiển thị một vị trí đã được xác định trước.

 

menu vị trí

 

Nếu bạn chọn “Tìm kiếm và hiển thị vị trí”, bạn sẽ có một số tham số hiển thị. Một số tham số này có thể ghi đè lên các tham số mặc định của thành phần.

 

cấu hình menu chính

 

Từ tab chính của menu, bạn có thể thiết lập:

  • Nhập địa chỉ: Bạn có thể buộc hiển thị địa chỉ mặc định khi tải trang. Bạn cũng có thể để trống mục này.
  • Khoảng cách: khoảng cách đến vị trí tìm kiếm khóa, tham chiếu đến địa chỉ ở trên. Có thể để là -1 (mặc định).
  • Danh mục: tải một danh mục vị trí cụ thể
  • Giới hạn tìm kiếm: giới hạn số lượng kết quả tìm kiếm. 10 sẽ chỉ trả về 10 kết quả đầu tiên khi tìm kiếm vị trí.
  • Sắp xếp: Sắp xếp kết quả tìm kiếm theo Ngày, Tiêu đề, Khoảng cách (mặc định)

 

mml-menu-advanced

 

Sau đó, trong tab menu My Maps Location , bạn có thể thiết lập:

  • Chọn thành phần: My Maps Location hoặc tất cả các tích hợp bên thứ ba như K2, Jomsocial ...
  • ID danh mục mặc định ( extension ): Danh mục mặc định sẽ được tải khi sử dụng tiện extension , chẳng hạn như K2, Hikashop hoặc Adsmanager, ID danh sách CB cho trình tạo cộng đồng
  • Vị trí của danh mục con: Hiển thị cả vị trí từ các danh mục con, không chỉ danh mục đã chọn ở trên, trong kết quả tìm kiếm.
  • Theme : Chọn một trong 3 theme theme thanh bên hiển thị kết quả tìm kiếm dành cho mục menu.
  • Nhà cung cấp bản đồ: Chọn Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu hoặc Mapquest để tùy chỉnh bản đồ của bạn.
  • Kích hoạt tìm kiếm theo thẻ : Cho phép thực hiện các truy vấn tìm kiếm bằng tên thẻ vị trí.
  • Thiết kế: Tùy thuộc vào nguồn bản đồ, bạn sẽ có nhiều loại bản đồ và màu sắc khác nhau.
  • Lớp bản đồ: Thêm dữ liệu (lớp) vào bản đồ của bạn. Có các lớp KML, lớp giao thông, lớp phương tiện công cộng và lớp xe đạp.
  • URL lớp bản đồ Google: Sử dụng lớp Dữ liệu để lưu trữ dữ liệu tùy chỉnh của bạn hoặc hiển thị dữ liệu GeoJSON trên bản đồ Google.
  • Loại bản đồ Bing: Nếu Bing Maps là nhà cung cấp bản đồ của bạn, hãy chọn giao diện và dữ liệu của Bing Maps.
  • Loại bản đồ OpenStreetMap: Nếu OpenStreetMap là nhà cung cấp bản đồ của bạn, thì bạn có thể thêm một số dữ liệu (lớp) vào bản đồ của mình.
  • Chú thích vị trí: Khi tải bản đồ, chú thích vị trí sẽ tự động hiển thị sau khi tìm kiếm vị trí.
  • Thu phóng bản đồ: Xác định mức độ thu phóng mặc định trên bản đồ
  • Tùy chọn chiều rộng và chiều cao của bản đồ và kết quả tìm kiếm

 

Giao diện Frontend dựa trên theme

 

tìm kiếm bản đồ-themes

 

Kết quả hiển thị cho tìm kiếm một địa điểm duy nhất:

vị trí bridgewater


Hiển thị vị trí bằng cách sử dụng một mô-đun

My maps location có 2 mô-đun dành cho định vị bản địa và một mô-đun khác để tích hợp với bên thứ ba (như mô-đun hiển thị vị trí vật phẩm K2)

Mô-đun Bản đồ cho phép bạn hiển thị các vị trí của mình với các bộ lọc tương tự như menu nhưng ở dạng mô-đun. Các vị trí sẽ được hiển thị dưới dạng Bản đồ hoặc Danh sách. Bạn có thể chọn một tập hợp các vị trí hoặc chọn các danh mục vị trí.

 

mô-đun bản đồ

 

Mô-đun Tìm kiếm Bản My Maps Location sẽ hiển thị một công cụ tìm kiếm với một số bộ lọc tùy chọn như chiều rộng bản đồ hoặc thành phần mà vị trí sẽ được tìm kiếm (ví dụ: chỉ tìm kiếm vị trí K2).

 

mô-đun tìm kiếm

 

Mô-đun hiển thị trên frontend:

 

mô-đun tìm kiếm-bản đồ-frontend

 

 

Hiển thị vị trí bằng nút chỉnh sửa


Nút chỉnh sửa sẽ được tải trong trình soạn thảo Joomla của bạn (thường nằm trong các bài viết hoặc mô-đun HTML tùy chỉnh). Bạn sẽ thấy nút này ở cuối trình soạn thảo.
Khi nhấp vào, bạn sẽ thấy một hộp thoại cho phép bạn chọn một hoặc nhiều vị trí bạn đã thêm trước đó.

 

nút chỉnh sửa bản đồ

 

Sau đó, bạn có thể chọn một hoặc nhiều vị trí và nhấn nút để thêm vào bài viết của mình. Nếu bạn không chỉ định mức độ thu phóng nào, nó sẽ tự động được tải để phù hợp với khu vực vị trí của bạn.
Mã thẻ bạn sẽ thấy trong trình soạn thảo WYSIWYG sẽ có dạng như sau: {mymaplocations mapid width height}

Ví dụ: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} đoạn mã này sẽ hiển thị bản đồ với ID vị trí là 1, chiều rộng 58%, chiều cao 400px, độ phóng đại 10 lần và kiểu hiển thị là Google. Sử dụng dấu phẩy để thêm nhiều hơn một vị trí trên bản đồ. Ví dụ: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} với ID vị trí là 1, 2, 3.