cách nhúng google map vào website là một trong những từ khóa được search nhiều nhất trên google về chủ đề cách nhúng google map vào website. Trong bài viết này,hoclamweb.vn sẽ viết bài viết Hướng dẫn các cách nhúng google map vào website mới nhất 2020.
Hướng dẫn các cách nhúng google map vào website mới nhất 2020.
hướng dẫn tích hợp google map vào website
dùng thử
Google Map là một ứng dụng miễn phí được xây dựng và phát triển bởi tập đoàn Google. Nói tới google map thì chúng ta sẽ nhắc tới các vận dụng của nó như:
- Bạn có thể tìm địa điểm trên google map
- Bạn có thể tìm đường đi trên google map
- Bạn đủ nội lực nhìn thấy tổng quan về một địa điểm thông qua vệ tinh của google map
- Và còn nhiều chức năng nữa.
Riêng với các web thì chức năng đa dạng nhất đó là hiển thị địa điểm lên website, chức năng này sẽ khiến khách hàng đủ nội lực tìm tới trụ sở chính của công ty một mẹo đơn giản. Và hôm nay freetuts.net sẽ tut các bạn tích hợp địa điểm google map vào web thông qua API của nó.
Các bạn xem gợi ý dưới đây:
nội dung chính
- 1. thiết lập trang giao diện
- 2. Nhúng bản đồ vào web
- 3. Lời kết
1. xây dựng trang giao diện
đầu tiên là tạo giao diện web, các bạn tạo file index.html và tạo vúng chứa bản đồ bằng đoạn code sau nhé:
|
1
|
<divid="map"style="width:500px;height:500px;">div> |
Mình sẽ tạo một thẻ div với chiều rộng và chiều cao được thiết lập, thẻ div này sẽ được sử dụng để hiện thị bản đồ.
OK! Vậy là xong giao diện rồi giờ ta tiến hành nhúng bản đồ vào nhé!
2. Nhúng bản đồ vào website
đầu tiên các bạn truy cập vào google map. Sau đó chọn địa chỉ mong muốn nhúng vào trang, ở đây mình chọn lăng chủ tịch, tiếp đến bấm vào chia sẻ( bôi đỏ dưới hình):
Sau khi bấm sẽ hiện lên cửa sổ các bạn chọn sang tab Nhúng bản đồ:
Các bạn sao chép đoạn mã như trong hình:
Ok bước cuối cùng là gắn nó vào trong thẻ div của file index.html:
|
1
2
3
4
5
6
7
8
|
<divid="map"phong cách="width:500px;height:500px;"><iframesrc="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3723.8977453149246!2d105.83245751424809!3d21.036777085994046!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3135aba15ec15d17%3A0x620e85c2cfe14d4c!2zTMSDbmcgSOG7kyBDaMOtIE1pbmg!5e0!3m2!1svi!2sus!4v1501056274257" width="600"height="450"frameborder="0"phong cách="border:0"allowfullscreen>iframe>div> |
Vậy là xong, giờ các bạn xây dựng file index.html sẽ được kết quả dưới đây:
3. Lời kết
Vậy là mình vừa mới cùng các bạn tích hợp bản đồ vào web của mình.
Hi vọng bài viết này đang giúp các bạn có thêm sự chọn cho trang web hoặc blog của mình. Nếu có thắc đắt tiền gì các bạn có thể để lại dưới phần bình luận. Hẹn gặp lại các bạn trong các bài viết kế tiếp trên freetuts.net.
kiềm hãm học nên nhìn thấy
- Học jQuery từ cơ bản đến nâng cao
- Bootstrap CSS Framework – CSS & Component
- Học lập trình JAVASCRIPT
- Trang trí web bằng CSS
- design web với HTML
