Chọn ngôn ngữ google map và chạy google map trên thiết bị di động - Google Maps
Nếu bạn chưa có ứng dụng API KEY của google map thì quay lại bài đăng ký google map API để lấy API key sử dụng google map 1. Phát triển google map trên thiết bị di động Với google map API v3 đã được nâng cấp hỗ trợ load bản đồ trên thiết bị di động một cách nhanh chóng, nó tập trung vào ...
1. Phát triển google map trên thiết bị di động
Với google map API v3 đã được nâng cấp hỗ trợ load bản đồ trên thiết bị di động một cách nhanh chóng, nó tập trung vào các thiết bị smart phone hiện đại như Android và IOS có kích thước hoàn toàn nhỏ hơn thiết bị desktop thông thường. Tuy nhiên chúng ta hoàn toàn có thể lập trình sử dụng google map trên thiết bị di động,
Như bạn biết để hiển thị toàn màn hinh ở bất kỳ độ phân giải và kích thước nào thì ta sẽ dùng chiều rộng và chiều cáo tính theo %, browser sẽ tự động đo kích thước và tính % hiển thị. Như vậy để hiển thị full màn hình trên thiết bị di động thì ta sẽ thiết lập thẻ DIV chứa google map width = 100% và height = 100%.
Một điều cần chú ý nữa là với thiết bị điện thoại IOS hay Android thì ta sẽ dùng thẻ meta viewport <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />.
Để kiểm tra người dùng đang sử dụng thiết bị nào thì ta sẽ dùng một hàm đơn giản dưới đây:
function detectBrowser()
{
// User Agent hiện tại
var useragent = navigator.userAgent;
// Div hiển thị google map
var mapdiv = document.getElementById("map-canvas");
// Nếu là iPhone hoặc Android thì thiết lập màn hình full 100%
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
// Ngược lại người dùng đang dùng desktop, ta thiết lập theo percent
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}Để tìm hiểu thêm các thông tin google map trên thiết bị di động bạn vào những link dưới đây để tham khảo thêm:
- Apple's Developer documentation
- Android documentation
2. Lựa chọn ngôn ngữ hiển thị trên google map
Mặc định ngôn ngữ hiển thị trên google map là tiếng anh, tuy nhiên nếu bạn có nhu cầu chuyển sang một ngôn ngữ khác thì Google map API v3 đã cung cấp cho bạn một cách rất đơn giản đó là truyền tham số ngôn ngữ muốn hiển thị khi load script google map:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY&language=LANG_CODE"></script>
Ví dụ: Hiển thị bản đồ thành phố Hồ Chí Minh với ngôn ngữ hiển thị là Tiếng Việt: Xem demo
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfNk5eVWmQB9e6ApnWzICLNIY5lUXpOBw&language=vi"></script>
<script type="text/javascript">
// Function khởi tạo google map
function initialize()
{
// Config google map
var mapOptions = {
// Tọa độ muốn hiển thị ban đầu (tung độ,vỹ độ)
center: new google.maps.LatLng(10.771971, 106.697845),
// Mức độ zoom
zoom: 8
};
// Hiển thị map lên bản đồ (div#map-canvas)
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
}
// Gán hàm initialize vào trong sự kiện load dom google map
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"/>
</body>
</html>
3. Lời kết
Trong bày này mục đích là tìm hiểu định hướng hiển thị bản đồ google map trên các thiết bị di động hiện đại như IOS, Android và cách lựa chọn ngôn ngữ hiển thị cho google map khi hiển thị lên bản đồ.
