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: Cách chèn google map 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 forestcitymalaysia.com.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é:

Bài viết này được đăng tại

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 đồ.

Xem thêm:

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.

Xem thêm: Biệt Danh Tiếng Anh Dễ Thương, Biệt Danh Tiếng Anh Ngầu Cho Nam, Nữ, Người Yêu

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 forestcitymalaysia.com.vn.

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

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng …

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản …

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn …

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là …

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

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ẻ title 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ẻ base trong html …

Thẻ link trong HTML

Cách sử dụng thẻ html …

Thẻ meta trong HTML

Cách sử dụng thẻ meta html …

Thẻ script trong HTML

Cách sử dụng thẻ script html …

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html …

WORDPRESS
HTML Templates
Theme WordPress
Plugin WordPress
Lập trình WordPress
Thủ thuật WordPress
WEB HOSTING
Quản trị Linux
Thủ thuật Hosting
Kiến thức Domain
WEB FRONTEND
Javascript
AngularJS
jQuery
jQuery Mobile
HTML & CSS
Bootstrap
TypeScript
SASS CSS
VueJS
NestJS
Học ReactJS
WEB BACKEND
PHP
Codeigniter
Laravel
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
VIDEO
CSS Lab
PHP Lab
Giới thiệu
Giới thiệu Liên hệ Chính sách Điều khoản
Liên kết
Thabet ek88bet.asia thabet.ai SP666 Fun 567Live MMLive QQLive Hotlive
Link hay
BETVISA KÍCH NGAY TẶNG 100K miễn phí TÝ BỐI – TẶNG NGAY 50K khuyến mãi khủng

tải app 567 live show

Trang chủ chính thức Ae888

Trang chủ chính thức Thabet

Nhà cái https://kubet8.us/

ĐK THABET nhận ngay 628k

kubet W88 kucasino.dev
Liên kết
kèo nhà cái KUBET88 f8bet Kubet88fun Ku casino KUBET Casino ae888 Ku casino cfun68

*

Leave a Reply

Your email address will not be published. Required fields are marked *