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 ứng dụng của nó như:
Bạn có thể tìm địa điểm trên google mapBạn có thể tìm đường đi trên google mapBạn có thể xem tổng quan về một địa điểm thông qua vệ tinh của google mapVà còn nhiều chức năng nữa.
Đang xem: Tích hợp bản đồ vào website
Riêng với các trang web thì chức năng phổ biến nhất đó là hiển thị địa điểm lên website, chức năng này sẽ giúp khách hàng có thể tìm tới trụ sở chính của công ty một cách dễ dàng. Và hôm nay huannghe.edu.vn sẽ hướng dẫn các bạn tích hợp địa điểm google map vào website thông qua API của nó.
Các bạn xem ví dụ dưới đây:
1. Xây dựng trang giao diện
Đầu tiên là tạo giao diện trang 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é:
Code
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ỉ muốn nhúng vào trang, ở đây mình chọn lăng chủ tịch, tiếp đến click vào chia sẻ( bôi đỏ dưới hình):
Sau khi click sẽ hiện lên cửa sổ các bạn chọn sang tab Nhúng bản đồ:
Các bạn copy đ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:
Code RUN
Vậy là xong, giờ các bạn mở file index.html sẽ được kết quả dưới đây:
3. Lời kết
Vậy là mình đã cùng các bạn tích hợp bản đồ vào trang web của mình.
Hi vọng bài viết này đã giúp các bạn có thêm sự lựa chọn cho trang web hoặc blog của mình. Nếu có thắc mắc gì các bạn có thể để lại dưới phần comment. Hẹn gặp lại các bạn trong các bài viết tiếp theo trên huannghe.edu.vn.
Bài trước Bài tiếp
Tạo menu một cấp bằng HTML đơn giản
Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…
Tạo HTML danh sách bài viết đơn giản
Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…
Tạo bổ cục layout HTML đơn giản
Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..
Phân biệt ID và Class trong HTML
Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..
Cách dùng thẻ div trong HTML để tạo các khối giao diện
Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo …
Phân biệt thẻ HTML Block và Inline
Có bao giờ bạn thắc mắc rằng, tại sao nội dung …
Thuộc tính style trong HTML
Do chúng ta chưa học CSS nên mình sẽ không nói …
Thẻ title trong HTML
Cách sử dụng thẻ html …
Thẻ style trong HTML
Style là một thẻ HTML bình thường, nó có công dụng là xác …
Thẻ base trong HTML
Cách sử dụng thẻ html …
Thẻ link trong HTML
Cách sử dụng thẻ html …
Thẻ meta trong HTML
Cách sử dụng thẻ html …
Thẻ script trong HTML
Cách sử dụng thẻ html …
Thẻ noscript trong HTML
Cách sử dụng thẻ html …
Thẻ select trong HTML
Cách sử dụng thẻ html …
Thẻ input trong HTML
Cách sử dụng thẻ html …
Thẻ textarea trong HTML
Cách sử dụng thẻ html …
Thẻ button trong HTML
Cách sử dụng thẻ html …
Thẻ option trong HTML
Cách sử dụng thẻ html …
Thẻ optgroup trong HTML
Cách sử dụng thẻ html …
VPS giá rẻ Hosting giá rẻ Domain giá rẻ
QUẢN TRỊ WEB
» Quản trị Linux
» Thủ thuật Hosting
» Kiến thức Domain
» Windows
» Bảo mật
WEB FRONTEND
» Javascript
» AngularJS
» jQuery
» jQuery Mobile
» HTML & CSS
» Bootstrap
» TypeScript
» SASS CSS
» VueJS
» NestJS
» Học ReactJS
WEB BACKEND
» PHP
» Codeigniter
» Laravel
» WordPress
» Phalcon
» OpenCart
» NodeJS
» Blogspot
DATABASE
» Học MySQL
» Học MongoDB
» CSDL căn bản
» Học Oracle
» Học SQL Server
» Học SQLite
PROGRAMMING
» Python
» Java
» Pascal
» Học C#
» Học Ruby
» Học Swift
» C / C++
» Kotlin
» Golang
» Giải thuật
» Visual Basic
MOBILE DEV
» React Native
» Học iOS
» Android
CÔNG CỤ
» Học Git
» Testing
» Control Panel
» Dev Tool
» FFmpeg
TIN HỌC
» Excel
» Word
» PowerPoint
» Access
» Photoshop
MÔN HỌC
» Tiếng Anh
» Toán
» Tiếng Nhật
» Văn học
Giới thiệu
Giới thiệu Liên hệ Chính sách Điều khoản Guest Post
Liên kết
Thủ thuật Download Game Ứng dụng Tin học Môn học
Hosting
Tinohost Azdigi Vultr INET
Khóa học
PHP AZ Laravel Frontend FullStack Javascript jQuery Javascript NodeJS + ReactJS
