Google maps trong HTML

  • Nguyễn Lê Điệp
  • 22-01-2017
  • 67
  • 0
  • 1
  • 0
  • Bài viết được đăng tại kennis.vn - không copy dưới mọi hình thức.

    Google maps trong HTML

    Trong HTML bạn cũng có thể chèn Google maps vào trang web của mình bằng các thẻ HTML cơ bản. Bên dưới là một ví dụ về vấn đề này:
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Bên dưới là một ví dụ về Google maps trong trang web</h1>
    <div id="map">Đây là Google maps sẽ được hiển thị lên web</div>
    </body>
    </html>
    Xem ví dụ

    Kích thước Google maps

    Bạn cũng có thể đặt kích cở hiển thị cho Google maps
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Bên dưới là một ví dụ về Google maps trong trang web</h1>
    <div id="map" style="width:400px;height:300px;background:pink"></div>
    </body>
    </html>
    Xem ví dụ

    Tạo function Google maps

    Bên dưới được xác định tại vị trí Cảm Đức, Ân Hảo, Hoài Ân, Bình Định, Việt Nam
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Google maps</h1>
    <div id="map" style="width:400px;height:300px;background:pink"></div>
    <script>
    function myMap() {
        var mapOptions = {
            center: new google.maps.LatLng(14.498300, 108.919551),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }
    </script>
    </body>
    </html>
    Xem ví dụ

    - Với map là một biến dạng giá trị của thuộc tính trong HTML định nghĩa cho bản đồ.

    - Với center xác định vị trí cần hiển thị nằm chính giữa vùng hiển thị cho bản đồ.

    - Với zoom xác định mức độ phóng to, thu nhỏ của bản đồ.

    - Với mapTypeId xác định loại bản đồ hiển thị gồm có các loại: ROADMAP, SATELLITE, HYBRID và TERRAIN.

    - Với var map = new google.maps.Map(document.getElementById("map"), mapOptions); xác định vị trí tùy chọn của người dùng để hiển thị lên bản đồ.

    API của Google maps

    Bước cuối cùng để bản đồ có thể hiển thị lên trang web của bạn bằng các gợi thư viện  JavaScript của Google vào trang web của bạn thông qua chức năng API của Google maps thông qua thuộc tính callback với giá trị là myMap.
    <!DOCTYPE html>
    <html>
    <body>
    <h1>Google maps</h1>
    <div id="map" style="width:400px;height:300px;background:pink"></div>
    <script>
    function myMap() {
        var mapOptions = {
            center: new google.maps.LatLng(14.498300, 108.919551),
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
    var map = new google.maps.Map(document.getElementById("map"), mapOptions);
    }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCu7A0eYpzxZTK9jy1MF_CRnqASO28jb-0&callback=myMap"></script>
    </body>
    </html>
    Xem ví dụ
    Chúc các bạn thành công!laugh
    Từ khóa:

    Google maps trong HTML

    Google maps trong HTML

    Google maps trong HTML

    Google maps trong HTML
    Google maps trong HTML
    1 or 0
    Lưu ý: Đăng câu hỏi trên Group Facebook để được hỗ trợ nhanh nhất.
    Đang tải...
    Nguyễn Lê Điệp
    Có sở thích lập trình, viết lách nên đã từng tham gia quản trị và viết bài ở một số diễn đàn, đến năm 2016 mới có điều kiện sáng lập ra kennis.vn với mục đích chia sẻ để học tập. Sinh năm 93, đang học tập và làm việc tại Hồ Chí Minh City.

    Thống kê

    - Hôm nay:
    567
    - Hôm qua:
    733
    - Tuần này:
    3.261
    - Tuần trước:
    4.961
    - Tháng này:
    17.601
    - Tháng trước:
    21.557
    - Năm này:
    66.329
    - Năm trước:
    17.373
    - Tổng cộng:
    83.702