Viết ứng dụng google map hiển thị bản đồ thành phố Hồ Chí Minh

Ở bài trước chúng ta đã tạo được một google map API key rồi nhỉ, vậy thì trong bài này ta sẽ thực hành tạo một ứng dụng nho nhỏ đó là hiển thị bản đồ google map của Thành Phố Hồ Chí Minh. Để xây dựng ứng dụng này ta sẽ đi qua một vài bước theo thứ tự như sau:

test php

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

1. Tạo file html hiển thị bản đồ google map

Trong bước này ta sẽ tạo một file hiển thị google map, bạn tạo file index.html với nội dung như sau:

<!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>
  </head>
  <body>
    <div id="map-canvas"/>
  </body>
</html>

Trong đoạn code này bạn chú ý div#map-canvas, bản đồ google map sẽ hiển thị trong thẻ div này. Đoạn code thứ hai bạn cần chú ý đó là đoạn style CSS tôi gán #map-canvas { height: 100% } mục đích cho bản đồ hiển thị full màn hình. Như vậy muốn style cho bản đồ bạn sẽ style lên dviv#map-canvas.

Bài viết này được đăng tại [free tuts .net]

2. Thêm thư viện javascript google map

Chúng ta đang sử dụng javascript google map để xây dựng ứng dụng hiển thị bản đồ với điểm bắt đầu là TPHCM nên bước đầu tiên phải import thư viện js của google vào, với thư viện này ta sẽ sử dụng các API mà nó cung sẵn để thao tác trên bản đồ google map.

Trong thẻ head của file index.html bạn thêm đoạn mã như bên dưới:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

Trong đoạn này ban sẽ thay API_KEY bằng với mã API_KEY mà bạn đã tạo ở bài trước.

3. Sử dụng javascript API để hiển thị bản đồ TP Hồ Chí Minh

Có lẽ đây là bước quan trọng nhất, ở đây ta sẽ sử dụng một số API google map căn bản để thực hiện hiển thị bản đồ. Và điều đầu tiên bản phải nghĩ tới là tung độ và vỹ độ của vị trí bắt đầy (TP Hồ Chí Minh), ở đây tôi đã tìm được hai thông số này đó là (10.771971, 106.697845). Giờ ta bắt đầu nhé, trong file index.html bạn sẽ thêm một số đoạn mã javascript như bên dưới đây:

// 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);

Như vậy là ta đã tạo được một ứng dụng google map đơn giản, chạy lên thì màn hình sẽ như demo dưới đây: Xem demo

Viết ứng dụng google map hiển thị bản đồ thành phố hồ chí minh

Như vậy ta có toàn file như sau:

<!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"></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>

4. Lời kết

Trong ví dụ đơn giản hiển thị bản đồ Thành Phố Hồ Chí Minh với google map này sẽ giúp bạn có cái nhìn tổng thể để bắt đầu tìm hiểu những vấn đề cao siêu hơn. Hãy chờ những bài tiếp theo để nắm vững Google Map Toàn Tập nhé.

Bài trước Bài tiếp

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Hướng dẫn cách tạo một số ngẫu nhiên ...

Viết ứng dụng google map hiển thị bản đồ thành phố Hồ Chí Minh

1. Tạo file html hiển thị bản đồ google map

2. Thêm thư viện javascript google map

3. Sử dụng javascript API để hiển thị bản đồ TP Hồ Chí Minh

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và proto trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Viết ứng dụng google map hiển thị bản đồ thành phố Hồ Chí Minh

1. Tạo file html hiển thị bản đồ google map

2. Thêm thư viện javascript google map

3. Sử dụng javascript API để hiển thị bản đồ TP Hồ Chí Minh

4. Lời kết

Cùng chuyên mục:

Functional Programming là gì? Tại sao và khi nào bạn nên sử dụng trong JavaScript

Những tính năng mới trong ES6+ trong JavaScript

4 cách tránh memory leaks trong JavaScript

Capturing và bubbling Event trong Javascript

Phân biệt prototype và __proto__ trong JavaScript

Cách hoạt động của Event Loop trong JavaScript

Phương thức bind(), call(), và apply() trong JavaScript

Cách khắc phục lỗi "hoisting" trong JavaScript

Sử dụng Promise.all và Promise.race để quản lý các Promise trong JavaScript

Xử lý bất đồng bộ bằng vòng lặp for-await trong JavaScript

Sự khác biệt giữa Promise, Callback và Async/Await trong JavaScript

Cách sử dụng Async functions trong JavaScript

Hàm String isspace() trong Python

Cách tạo số ngẫu nhiên trong Javascript

Cách gộp hai object javascript lại với nhau

Cách lấy chiều dài của object trong Javascript

Hướng dẫn giải phương trình bậc 1 bằng Javascript

Cách dùng nextSibling trong javascript

Cách dùng insertAdjacentHTML trong javascript

Cách dùng innerHTML trong Javascript

Giới thiệu

Thủ thuật

Link hay

Liên kết

Phân biệt prototype và proto trong JavaScript