Google Maps API là công cụ để giúp bạn tạo bản đồ địa điểm để chia sẻ trên trang web hoặc blog. Nếu bạn muốn tạo bản đồ chỉ đường cho quán ăn hoặc tạo bản đồ cho công ty thì bạn có thể yên tâm vì Google Maps API có thể giúp bạn làm công việc này, cách sử dụng cũng không khó lắm nhé.
Cách đơn giản nhất mà bạn có thể làm đó là vào địa chỉ Google Maps và tìm kiếm một địa điểm bất kỳ, sau đó chụp hình lại toàn bộ trang web, và chia sẻ lại hình ảnh này lên trang web của bạn. Đối với cách này thì bạn không cần có nhiều kinh nghiệm, lại đơn giản, dễ sử dụng nhưng không phù hợp với người muốn chi tiết. Nếu là hình ảnh thông thường thì người dùng không thể zoom vào xem rõ hơn bên tronh cũng như không kéo di chuyển xem được các khu vực xung quanh của bản đồ, do vậy mà bạn cần phải sử dụng Google Maps API để làm việc này.
Đầu tiên thì bạn vào trang chủ của Google Maps API như đường dẫn bên trên mình đưa, kéo chuột xuống dưới 1 xíu và bạn sẽ thấy được menu điều hướng cho phép bạn lựa chọn xây dựng bản đồ trên nền tảng web hay cho hệ điều hành Android hoặc hệ điều hành iOS. Ở đây thì mình làm bản đồ chia sẻ trên website nên bạn chỉ chú ý đến menu Web mà thôi. Trong menu này lại có thêm 2 nhánh con, đó là: tạo bản đồ bằng cách sử dụng Embed hoặc sử dụng Javascript.
Tạo bản đồ bằng cách sử dụng Embed
Đối với cách sử dụng embed thì đơn giản hơn rất nhiều, bạn không cần phải có kiến thức nhiều về code. Ngay bây giờ thì bạn vào trang chủ của Google Maps Embed API, hoặc click vào menu Embed như bên trên mình giới thiệu.
Bạn vào bên trong trang Google Maps Embed API và gõ vào địa điểm bạn cần tạo bản đồ. Nhược điểm của cách embed này là lúc này đây, khi bạn tìm kiếm mà địa điểm của bạn không xuất hiện trên Google Maps thì sao? Bạn sẽ không làm được nếu như bạn không thấy địa chỉ công ty của bạn trên bản đồ. Còn ưu điểm là nhanh và dễ sử dụng. Nếu sau khi tìm kiếm mà bạn thấy bản đồ xuất hiện chính xác địa chỉ công ty hoặc quán ăn của bạn thì bạn nhấn vào nút Look goods! để chuyển sang bước tiếp theo. Ở bước này Google yêu cầu bạn nhập vào API key, bạn chỉ cần làm theo hướng dẫn Google Maps Embed API.
Kể cả cách tạo map theo kiểu embed hoặc tạo map bằng javascript thì bạn đều cần phải có API key. Cái này rất hữu dụng nha bạn, bạn hãy tạo một dự án trên Google Developers Console và sử dụng nhiều dịch vụ miến phí hữu ích của Google.
Sau khi bạn lấy được API key thì bạn nhập vào ô API key trong kết quả tìm kiếm bản đồ bên trên, ô này có label với chữ là Enter your API key, bạn nhập vào giá trị và nhấn Done nhé. Công việc cuối cùng của bạn là sao chép toàn bộ đoạn code của bạn và bỏ vào vị trí bạn muốn bản đồ xuất hiện.
<iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=Th%E1%BB%A7y%20T%E1%BA%A1%20%C4%90%C3%A0%20L%E1%BA%A1t&key=AIzaSyDe_qWvGkgbnBwLlxFLF_9KOBiEAn_VL9E"></iframe>
Làm bằng cách Embed tuy nó đơn giản, thời gian làm việc nhanh nhưng có nhược điểm là bạn không thể tìm được địa điểm cho các vị trí ở vùng thôn quê, trừ khi bạn đã sử dụng Google Maps Maker để tạo địa điểm của bạn lên bản đồ và được Google duyệt trước.
Tạo bản đồ bằng cách sử dụng Javascript
Khi bạn thấy chữ Javascript là bạn biết là phải sử dụng mã javascript trong này, bằng cách sử dụng javascript này thì bạn có thể tạo ra một bản đồ tùy chỉnh, bạn có thể tạo địa điểm cho bất kỳ nới nào bạn thích mà không cần phải lo địa điểm của bạn đã xuất hiện trên Google Maps trước đó hay chưa.
Đầu tiên thì bạn vào trang chủ của Google Maps JavaScript API v3, bên trong này sẽ có đầy đủ các hướng dẫn cho phép bạn tiến hành code tạo bản đồ chỉ đường trên Google.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Cách đơn giản nhất là bạn sử dụng code như đoạn code bên trên mình giới thiệu, bạn thay API_KEY bằng API key của bạn lấy được trong bước mình hướng dẫn đầu bài. Sau đó bạn thay 2 con số lat và lng theo địa điểm của bạn. Để lấy được thông tin latitude và longitude, bạn truy cập vào trang chủ của Google Maps và tìm tới một vị trí bất kỳ. Bạn nhấn chuột phải vào địa điểm nhà bạn hoặc công ty của bạn, chọn Đây là gì? thì bạn sẽ thấy được kết quả. Nếu bạn muốn nhanh hơn thì có thể tìm kiếm được thông tin này trên thanh địa chỉ của trình duyệt.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDeULBLLWvZRAQ7pDXs9s0T_tUQzpSClNc"></script>
<script type="text/javascript">
var map,
infowindow,
marker = new Array(),
old_id = 0,
defaultLatLng = new google.maps.LatLng(12.582493, 108.139325),
infoWindowArray = new Array(),
infowindow_array = new Array();
function loadMarker(myLocation, myInfoWindow, id){
marker[id] = new google.maps.Marker({position: myLocation, map: map, visible:true});
var popup = myInfoWindow;
infowindow_array[id] = new google.maps.InfoWindow({ content: popup});
google.maps.event.addListener(marker[id], 'mouseover', function() {
if (id == old_id) return;
if (old_id > 0) infowindow_array[old_id].close();
infowindow_array[id].open(map, marker[id]);
old_id = id;
});
google.maps.event.addListener(infowindow_array[id], 'closeclick', function() {
old_id = 0;
});
}
function moveToMaker(id){
var location = marker[id].position;
map.setCenter(location);
if (old_id > 0) infowindow_array[old_id].close();
infowindow_array[id].open(map, marker[id]);
old_id = id;
}
function initialize() {
var mapOptions = {
center: defaultLatLng,
zoom: 16,
scrollwheel : false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
map.setCenter(defaultLatLng);
infoWindowArray[7895] = '<div class="map_description"><div class="map_title">Trường mầm non Tuổi Thơ</div><div>Xã Ea Tiêu, huyện Cư Kuin, tỉnh Đắk Lắk</div></div>';
loadMarker(defaultLatLng, infoWindowArray[7895], 7895);
moveToMaker(7895);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Vẫn còn có nhiều cách nữa cho phép bạn tùy biến bản đồ trên Google Maps, nhưng nếu bạn muốn thành công hơn thì nên gửi thông tin công ty của bạn sang cho Google xác nhận và họ sẽ tạo luôn địa điểm của bạn lên Google Maps, sau này muốn lấy bản đồ chỉ dẫn thì bạn chỉ cần dùng cách embed như bên trên, ngoài ra khi người dùng tìm kiếm tên công ty của bạn thì người ta sẽ thấy bản đồ xuất hiện bên cạnh kết quả tìm kiếm trên trang chủ của Google.
Nếu bạn đưa công ty của bạn lên Google và được họ xét duyệt thì sau khi người dùng tìm kiếm về thông tin công ty của bạn, một bản đồ nhỏ sẽ xuất hiện phía bên phải của kết quả tìm kiếm trên Google như hình ảnh bên trên. Chúc bạn thành công.
