Bài 03: Chọn ngôn ngữ google map và chạy google map trên thiết bị di động

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 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%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:

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 đồ.

Học Javascript qua các bài tập thực hành

Bạn muốn học và nắm bắt Javascript một cách nhanh nhất thì khoá học Javascript từ đầu sẽ giúp bạn, đây là khóa học được biên soạn dành cho người mới học, và mọi thứ sẽ thông qua thực hành, bạn sẽ dễ dàng nắm bắt và nhớ lâu hơn. Bạn sẽ được học xử kỹ thuật lý các hiệu ứng, thao tác với DOM, BOM và nhiều kỹ thuật khác.

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
UNICA - Học lập trình JAVASCRIPT

(Giảng viên: )

XEM