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

Tài liệu chỉ mang tính chất tham khảo, mình không cam kết các nội dung trên website, vì vậy không được sử dụng để in ấn hay kinh doanh.
Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website vi phạm nội dung bản quyền mà mình đã đưa ra.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.