Bootstrap

Vũ Thành Lâm

Content - Code - SEO - MMO
17/10/1979
Tây Mỗ - Nam Từ Liêm - Hà Nội
thanhlam19792003

Lamvt – Vũ Thành Lâm – bắt đầu Code 2005 Freelancer từ 2006 với hàng ngàn dự án lớn nhỏ cho nước ngoài và hàng trăm dự án web cho Việt Nam.

SEO thành công rất nhiều dự án lớn, độ khó cao.
MOD (Moderator) và Admin (Administraror) của nhiều diễn đàn về SEO và CODE web MMO tại Việt Nam
Dạy Lập trình Thiết kế Web và SEO Miễn phí 15++ Năm (Từ 2006 đến Nay)

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API

5/5 - (3 bình chọn)

Tôi đã từng tạo trang địa điểm cho một nhà hàng có nhiều vị trí (multi-location). Đây là một xu hướng áp đảo hiện nay, một bản đồ Google mà với mỗi vị trí có một điểm đánh dấu riêng.

Các công ty lớn có địa điểm trên khắp thế giới có cơ sở dữ liệu bản đồ lớn và nhiều rào cản khác nhau cần vượt qua, có thể tìm kiếm theo địa phương hoặc mã zip, Wi-fi sẵn có, giờ, v.v.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API google-maps

Đối với dự án cụ thể của mình, tôi chỉ có một vài mong muốn:

  • Tích hợp một bản đồ trên trang của mình
  • Hiển thị điểm đánh dấu cho mỗi vị trí
  • Mỗi điểm đánh dấu hiển thị địa chỉ và có thể cung cấp cả chỉ đường

Để thực hiện việc này, tôi cần ứng dụng Google Maps API của Nhà phát triển của Google (Google Developers).

Quan niệm sai lầm nhất của tôi với các Google Maps API trước khi biết về chúng đó là ta đang nhúng Google Maps vì ta biết chắc nó sẽ được tích hợp vào trang web. Tôi đã nghĩ đơn giản rằng với mỗi một điểm đánh dấu cho một vị trí thì tất cả các thông tin sẽ bật ra ở thanh bên ví dụ như địa chỉ hoặc thanh tìm kiếm chỉ đường.

Điều này hóa ra không đúng trong trường hợp bạn đã có một tấm bản đồ, nhưng việc thêm một điểm đánh dấu cũng sẽ không dẫn đến bất kỳ hành động không mong đợi nào. Tôi đã tưởng tượng ra một thứ gì đó có thể giúp cho tôi, tôi sẽ viết về các bước tôi đã thực hiện nó phòng trường hợp bất cứ ai đang gặp khó khăn tương tự.

API là viết tắt của Giao diện Chương trình Ứng dụng (Application Program Interface). Để phát triển web, điều này thường có nghĩa là phần mềm của bên thứ ba mà bạn có thể nhúng vào trang web của bạn.

Nhận khóa API Google Maps Javascript

API Google Map dùng được trên Android, iOS, Web và các dịch vụ Web. Đơn giản chỉ cần nhúng một bản đồ vào trang web của bạn với một vài điểm đánh dấu nằm ngay dưới category của web, được gọi là Javascript của Google Maps.

Bước đầu tiên là lấy được một chìa khóa API.

Bạn phải đồng ý với các điều khoản và dịch vụ của họ.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API Google-Maps-APIs-1

Họ sẽ muốn bạn đưa ra một cái tên và đặt tính năng giới hạn. Nếu bạn đặt không hạn chế, bất cứ ai cũng có thể sử dụng nó và sử dụng hết hạn ngạch của bạn. Bản đồ chỉ miễn phí đến một điểm nhất định.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API Google-Maps-APIs-2

Sau đó, nó sẽ bật lên với một số chuỗi tìm kiếm siêu an toàn và bây giờ bạn có một chìa khóa.

Khóa API cấp cho nhà phát triển quyền truy cập API.

Bây giờ tôi có một chìa khóa, tôi có thể bắt đầu triển khai Google Maps vào trang web của tôi.

Nhúng bản đồ vào trang web của bạn

Tài liệu cho Google Map API rất phong phú. Họ có một “Hello, World!” khá hay, hoặc những hướng dẫn khi mới bắt đầu. Điều quan trọng là đảm bảo rằng mọi thứ được thiết lập chính xác trước khi bạn có thể tiếp tục thử những thứ khác nâng cao hơn.

Giống như bất kỳ điều gì có tương tác trên web, có ba thành phần – HTML, CSS và JavaScript. Ví dụ trên trang web chúng sẽ đặt tất cả mọi thứ vào một tệp, nhưng chúng tôi sẽ bắt đầu chia chúng thành ba tệp riêng biệt vì đó là cách bạn sẽ thiết kế dự án của mình trong thực tế.

HTML

Tôi có một tài liệu HTML5 chính quy, liên kết đến một bảng định kiểu CSS và tập lệnh JS. Bản đồ sẽ được chứa trong  <div id="map"></div>. Tất nhiên, bạn phải thay thế YOUR_API_KEY bằng khoá từ bước trước.

</pre>
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Google Maps APIs</title>

<link href="style.css" rel="stylesheet">
</head>

<body>

<div id="map"></div>

<script src="script.js"></script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>
</body>

</html>
<pre>

CSS

CSS do Google cung cấp là dành cho bản đồ toàn màn hình. Tôi đang đặt nó trong  style.css.

html,
body {
 height: 100%;
 margin: 0;
 padding: 0;
}
#map {
 height: 100%;
}

Các lớp htmlvà body cần phải có 100% chiều cao, cũng như id map. Đặt margin và padding là 0 để reset lại trình duyệt.

Mã này là tốt, nhưng tôi muốn thiết lập một cái gì đó dọc theo các đường height: 60vh đến id map60vh sẽ bằng 60% chiều cao của khung nhìn, vì vậy chiếm 60% diện tích bất trên màn hình. Bằng cách này, người dùng sẽ có thể dễ dàng cuộn qua bản đồ đến bất kỳ nội dung bổ sung nào bạn có. Trong phạm vi bài viết này, tôi sẽ chỉ để nó ở 100%, bởi vì tôi không có nội dung bổ sung nào.

Tại thời điểm này, bạn đã hoàn thành HTML và CSS cũng như làm nó gắn liền bản đồ.

JavaScript

Tôi sẽ chèn ví dụ khởi đầu của Google ở ​​đây trong script.js.

</pre>
var map;

function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {
lat: -34.397,
lng: 150.644
},
zoom: 8
});
}
<pre>

Tôi đang khai báo biến map, khởi tạo bản đồ với chức nănginitMap() và đặt Google Map vào bản đồ CSS của tôi bên trong biến map.

centerquyết định vị trí center của bản đồ (Sydney, New South Wales, Australia) và zoom quyết định xem nó sẽ phóng to đến mức nào.

Bây giờ bạn đã có một bản đồ hoạt động.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API Google-Maps-APIs-3

Tùy chỉnh bản đồ

Tôi có một bản đồ, nhưng nó chưa làm bất cứ điều gì chi tiết. Bạn có thể phóng to và thu nhỏ, chuyển đổi giữa chế độ xem phố và vệ tinh, nhấp và kéo bản đồ.

Tôi muốn thêm một điểm đánh dấu, vì vậy tôi vào trang Markers trên tài liệu. Tuy nhiên, thêm một điểm đánh dấu chỉ thực hiện duy nhất điều đó chứ không có gì khác. Sau đó tôi chuyển sang Info Windows, bổ sung thêm chi tiết cho một điểm đánh dấu. Tôi nghĩ rằng cửa sổ bật lên có thể có bất kỳ thông tin nào trên Google Maps khu vực, nhưng một cửa sổ thông tin chỉ chứa nội dung của riêng bạn.

Dịch vụ Web API của Google Places dường như tích hợp nhiều hơn với cơ sở dữ liệu Google Maps, nhưng cũng khó thực hiện hơn. Vì vậy tôi đã kiên trì với API của Google Maps Javascript cho dự án của tôi.

Khi tôi tìm kiếm một cách đơn giản, hiệu quả để tích hợp nhiều dấu với một địa chỉ và thông tin, tôi thấy một bài viết tuyệt vời trên StackOverflow. Tôi không thể nhận giải pháp này là của mình được. Đó là một mã rất linh hoạt mà thực sự đã giúp tôi trong dự án của tôi.

Mục tiêu

Hãy xác định mục tiêu và sau đó thực hiện nó.

  • Tôi sẽ sử dụng Chipotle cho ví dụ của tôi.
  • Địa điểm sẽ là Chicago.
  • Tôi sẽ giả vờ rằng chỉ có ba địa điểm Chipotle tồn tại, nhưng có thể nhiều hơn.
  • Mỗi vị trí sẽ có một cửa sổ bật lên có tên, địa chỉ, liên kết tới chỉ đường

Đối với điều này tôi sẽ cần phải biết địa chỉ của các địa điểm cũng như vĩ độ và kinh độ. Nhận Lat Long từ Address là một tài nguyênbtuyệt vời mà tôi đã tìm thấy và sử dụng.

Địa điểm

Đây là ba địa điểm của tôi.

Broadway
5224 N Broadway St, Chicago, IL 60640
(41.976816, -87.659916)

Belmont
1025 W Belmont Ave, Chicago, IL 60657
(41.939670, -87.655167)

Sheridan
6600 N Sheridan Rd, Chicago, IL 60626
(42.002707, -87.661236)

Điều khác tôi muốn là một URL dẫn đến việc tìm đường đến vị trí này. Vì vậy, tôi chỉ cần đi đến Google Maps, nhập địa chỉ tôi muốn và nhấp vào Chỉ đường (Ghet Directions). Bây giờ tôi có thể có được một liên kết đến bản đồ vào thời điểm này, vì vậy tôi nhấp vào Chia sẻ hoặc Nhúng bản đồ (Share or Embed Map) và nhận được URL.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API Google-Maps-APIs-4

Bây giờ tôi có tất cả mọi thứ tôi cần để xây dựng bản đồ tùy chỉnh của tôi. Đầu tiên tôi sẽ gọi hàm initMap đó.

function initMap() {
// More
}

Sau đó tôi sẽ tạo một đối tượng cho mỗi vị trí. Mỗi đối tượng là một biến sẽ chứa hộp thông tin, vĩ độ và kinh độ.

var broadway = {
 info: '<strong>Chipotle on Broadway</strong><br>\
 5224 N Broadway St<br> Chicago, IL 60640<br>\
 <a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
 lat: 41.976816,
 long: -87.659916
 };

info là một chuỗi mà trong đó tôi đã viết tên và địa chỉ của vị trí của tôi, cũng như liên kết tới chỉ đường trên Google Maps. Thêm một \ vào cuối chuỗi một chuỗi cho phép bạn tiếp tục viết nó trên dòng tiếp theo.

Tôi cũng đã tạo ra các đối tượng cho  belmont và sheridan.

Bây giờ tôi sẽ tạo một mảng trong một biến được gọi là  location chứa  infolat và long.

var locations = [
 [broadway.info, broadway.lat, broadway.long, 0],
 [belmont.info, belmont.lat, belmont.long, 1],
 [sheridan.info, sheridan.lat, sheridan.long, 2],
 ];

Tôi sẽ gọi bản đồ theo cách tương tự như tôi đã làm trong ví dụ “Hello, World!”. Tôi sẽ zoom đến 13 vì tất cả các địa điểm của tôi đều gần nhau và tập center nó trên vĩ độ cho Broadway, vì đó là vị trí trung tâm.

var map = new google.maps.Map(document.getElementById('map'), {
 zoom: 13,
 center: new google.maps.LatLng(41.976816, -87.659916),
 mapTypeId: google.maps.MapTypeId.ROADMAP
 });

Với phần cuối cùng của mã, số lượng các dấu và cửa sổ thông tin sẽ tự động cập nhật dựa trên biến locations của tôi.

</pre>
var infowindow = new google.maps.InfoWindow({});

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
<pre>

Đây là mã JavaScript cuối cùng và đầy đủ.

</pre>
function initMap() {

var broadway = {
info: '<strong>Chipotle on Broadway</strong><br>\
5224 N Broadway St<br> Chicago, IL 60640<br>\
<a href="https://goo.gl/maps/jKNEDz4SyyH2">Get Directions</a>',
lat: 41.976816,
long: -87.659916
};

var belmont = {
info: '<strong>Chipotle on Belmont</strong><br>\
1025 W Belmont Ave<br> Chicago, IL 60657<br>\
<a href="https://goo.gl/maps/PHfsWTvgKa92">Get Directions</a>',
lat: 41.939670,
long: -87.655167
};

var sheridan = {
info: '<strong>Chipotle on Sheridan</strong><br>\r\
6600 N Sheridan Rd<br> Chicago, IL 60626<br>\
<a href="https://goo.gl/maps/QGUrqZPsYp92">Get Directions</a>',
lat: 42.002707,
long: -87.661236
};

var locations = [
[broadway.info, broadway.lat, broadway.long, 0],
[belmont.info, belmont.lat, belmont.long, 1],
[sheridan.info, sheridan.lat, sheridan.long, 2],
];

var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(41.976816, -87.659916),
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({});

var marker, i;

for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});

google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
<pre>

Bây giờ tất cả các vị trí của tôi đều nằm trên bản đồ với hộp thông tin tương ứng.

Cách tạo nhiều bản đồ địa điểm đơn giản với Google Maps API Google-Maps-APIs-5

Tôi đã đặt dự án này lên trên GitHub – tất cả những gì bạn phải làm là chèn khóa API của riêng bạn.

 

Tin mới nhất

VR PLUS (https://vrplus.vn/ ) Là một trong những dự án do Lamvt thực hiện trong thời gian gần đây. Như...

Trong một năm qua, chúng tôi đã xuất bản khoảng 79 bài viết SEO trên blog Ahrefs. Các bài viết...

Khám phá kĩ thuật viết nội dung SEO Nếu không có SEO, nội dung của bạn có thể bị chìm...

Các website về lĩnh vực làm đẹp cần phải có một thiết kế (design) hấp dẫn và bắt mắt. Điều...

Core Web Vitals được đo lường như thế nào? Làm thế nào để bạn biết các bản sửa lỗi đã...

Tin được yêu thích

Như đã nói, phần mềm chỉnh sửa video đang ngày càng chứng tỏ được tầm quan trọng của mình, nhất...

Nhiều bạn thắc mắc là sau khi cài đặt Plugin cho Google AMP thì làm thế nào để kiểm tra,...

Các trang web giáo dục và các trang web của chính phủ có một lợi thế hơn trong bảng xếp...

Nội dung là một trong 3 tiêu chí quan trọng để google đánh giá thứ hạng tìm kiếm cho website...

Thẻ <span> </span> Thẻ <span> là thẻ khá đặc biệt trong HTML, theo mặc định thì thẻ <span> được thêm...

Khách đang xem

  1. Hầu hết các công cụ soạn thảo văn bản cho phép chúng ta lưu trữ và sử dụng lại các...
    10 giây trước
  2. Chạy kiểm tra tốc độ với các công cụ như Google PageSpeed ​​Insights, WebPageTest hoặc kiểm tra tốc độ của...
    4 giây trước
  3. Một trong những cách tốt nhất để phát triển doanh nghiệp là thông qua tối ưu hóa công cụ tìm...
    18 giây trước
  4. Chắc hẳn bạn đã không ít lần gặp sự cố khi nhận hoặc gửi email từ trang WordPress của mình,...
    24 giây trước
  5. Trong bài viết này, bạn sẽ được tìm hiểu về tất cả các bước cần thiết làm nên thành công...
    25 giây trước
  6. Từ khóa (keyword) là một trong những nội dung, và là một phần quan trọng nhất trong SEO. Có thể...
    29 giây trước
  7. Hôm nay Đệm Tốt sẽ tư vấn tới mọi người nên dùng loại đệm nào tốt cho sức khỏe. Với...
    27 giây trước
  8. SEO Blog là rất cần thiết cho việc thúc đẩy thành công của bất kỳ doanh nghiệp nào. Và không...
    19 giây trước
  9. Như các bạn đã biết, một website chuẩn SEO là một trong những yêu cầu vô cùng quan trọng. Bởi...
    28 giây trước
  10. Từ khóa SEO là gì? Từ khóa SEO là những từ và cụm từ chính trong nội dung trang web của...
    20 giây trước