Hỏi – ĐápDanh mục đơn: HTMLLàm thế nào để thêm Google map vào trang html
Chung Huynh Nhân viên asked 2 năm ago

Đây là code của một ví dụ của một trang có gắn bản đồ của Google

< !DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
  </body>
</html>

Hướng dẫn từng bước:

1. Load Google API () – Tải API của google map lên trang web:

đoạn script này được đặt ở phần <head>… </head> trang html của bạn

 <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>

2. Set Map Properties – thiết lập thuộc tính bản đồ:

đoạn script này được đặt ở phần <head>… </head> trang html của bạn Tạo chức năng để khởi tạo bản đồ:

function initialize() {
}

Trong phần khởi tạo chức năng, tạo đối tượng – object (mapProp) để xác định các thuộc tính của bản đồ

 var mapProp = {
  center:new google.maps.LatLng(51.508742, -0.120850),
  zoom: 7,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
  • Thuộc tính center dùng để xác định vị trí trung tâm của bản đồ, 2 dãy số ta thấy chính là kinh độ và vĩ độ dùng xác định tọa độ của vị trí trung tâm. vd: (51.508742, -0.120850) Lưu ý để lấy được 2 dãy số này : Khi click lên google map, bạn chú ý có một hộp nhỏ hiên thông tin địa điểm bạn vừa click bao gồm cả tọa độ map
  • zoom: dùng để xác định mức độ phóng đại của bản đồ: số càng lớn, bản đồ sẽ có nhiều chi tiết hơn, vd: zoom: 7
  • mapTypeId: Xác định thể loại của bản đồ, có tất cả 4 loại:
    • ROADMAP (bản đồ mặc định 2D map)
    • SATELLITE (bản đồ không ảnh vệ tinh)
    • HYBRID (bản đồ không ảnh vệ tinh + chi tiết tên đường và thành phố)
    • TERRAIN (bản đồ có chi tiết địa hình như núi, sông …)

3. Create a Map Container

Tạo một tag <div> để bao quanh bản đồ tại nơi bạn muốn bản đồ xuất hiện trện trang web. Sử dụng CSS để xác định kích thước ngang và dọc của bản đồ:

 <div id="map"></div>

4. Create a Map Object – tạo đối tượng bản đồ

var map=new google.maps.Map(document.getElementById("googleMap"), mapProp);

Đoạn code trên tạo ra một bản đồ mới bên tronge <div> với id=”googleMap”, sử dụng thông số (mapProp).

5. Add an Event Listener to Load the Map – tạo sự kiện Event Listener để tải bản đồ

google.maps.event.addDomListener(window, 'load', initialize);

Đoạn code này sẽ khởi tạo bản đồ khi trình duyệt tải trang web Tóm tắt đầy đủ ta sẽ cần code như sau, bạn chỉ cần copy và thay đổi tọa độ, kích thước theo ý muốn của mình

< !DOCTYPE html>
<html>
  <head>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
     <script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer></script>
  </body>
</html>

Ý kiến của bạn

bình luận

1 Answers
Chung Huynh Nhân viên answered 2 năm ago

Nếu bạn lười, có thể vào trang web này 
http://embedgooglemaps.com/
để tạo ra đoạn code nhanh chóng, copy và dán vào trang web của bạn.

Ý kiến của bạn

bình luận