Hướng Dẫn Chèn Bản đồ Google Map Vào Website Của Bạn

Trang chủ » Gắn Google Map Vào Web » Hướng Dẫn Chèn Bản đồ Google Map Vào Website Của Bạn

Có thể bạn quan tâm

Xin chào các bạn.

Như các bạn biết hầu hết tất cả các web đều có phần liên hệ. Ngoài các thông tin cơ bản như: tên công ty, địa chỉ, điện thoại, email. Thì bản đồ cũng là một cách để giúp khách hàng biết đường khi muốn đến trực tiếp doanh nghiệp của chúng ta.

Google map icon

Hôm nay mình xin giới thiệu các bạn, cách để chèn một bản đồ của Google Map vào website. Vậy google map là gì?

Google Map là một ứng dụng bản đồ được xây dựng và phát triển bởi tập đoàn Google. Một số tính năng của google map như:

  • Chúng ta có thể tìm địa điểm trên google map.
  • Google Map có thể chỉ đường cho chúng ta từ điểm A đến điểm B (Hoặc đến điểm C, D,...)
  • Chúng ta có thể tìm đường đi trên google map.
  • Chúng ta có thể chia sẻ bản đồ cho bạn bè, người thân, mạng xã hội, chia sẻ lên website,...
  • Chúng ta có thể xem 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...

Để chia sẻ địa điểm của công ty lên website chúng ta làm như sau:

Bước 1: Chuẩn bị trang HTML để hiển thị

Chúng ta tạo trang HTML để hiển thị bản đồ.

Đoạn mã HTML để chèn code hiển thị bản đồ như sau:

<div id="map" style="width:500px;height:500px;"></div>

Chú ý: chiều rộng (width) và chiều cao (height) dùng để hiển thị chiều rộng và cao của bản đồ. Chúng ta có thể thay đổi cho phù hợp với website của chúng ta.

Như vậy trang HTML đầy đủ cần có:

<html> <head> <meta charset="utf-8"> </head>

<body> <h1>Hướng dẫn chèn bản đồ Google Map vào website của bạn</h1> <div id="map" style="width:500px;height:500px;"> <!-- Code chèn bản đồ ở đây --> </div> </body> </html>

Bước 2: Lấy mã bản đồ

2.1. Truy cập vào trang bản đồ của google với địa chỉ Google Map là : www.google.com/maps

Giao diện google map

2.2. Nhập địa chỉ công ty của chúng ta tại thanh tìm địa chỉ

Thanh tìm kiếm địa chỉ trên google map

2.3. Chia sẻ địa chỉ trên google map

Chia sẻ bản đồ trên google map

Để lấy đoạn code chia sẻ của google map chúng ta chọn vào nút "Chia sẻ" như hình trên.

2.3. Lấy code nhúng bản đồ

Click vào nút "sao chép html"

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1959.8764002654043!2d106.6733294!3d10.7535252!3m2!1i1024!2i768! 4f13.1!3m3!1m2!1s0x31752efc2fa97409%3A0x54da553142caa729!2zOTMxIMSQxrDhu51uZyB UcuG6p24gSMawbmcgxJDhuqFvLCBQaMaw4budbmcgNywgUXXhuq1uIDUsIEjhu5MgQ2jDr SBNaW5o!5e0!3m2!1svi!2s!4v1545088896955" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

2.4. Bán (Paste) đoạn mã trên vào trang HTML hiển thị bản đồ. Khi đó đoạn mã HTML hoàn chỉnh như sau:

<html> <head> <meta charset="utf-8"> </head>

<body> <h1>Hướng dẫn chèn bản đồ Google Map vào website của bạn</h1> <div id="map" style="width:500px;height:500px;"> <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1959.8764002654043!2d106.6733294!3d10.7535252!3m2!1i1024!2i768! 4f13.1!3m3!1m2!1s0x31752efc2fa97409%3A0x54da553142caa729!2zOTMxIMSQxrDhu51uZyB UcuG6p24gSMawbmcgxJDhuqFvLCBQaMaw4budbmcgNywgUXXhuq1uIDUsIEjhu5MgQ2jDr SBNaW5o!5e0!3m2!1svi!2s!4v1545088896955" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div> </body> </html>

Bước 3: Chạy demo

Đoạn code trên các bạn lưu lại với file .html ví dụ như: google-map.html

Xem demo google map tại đây.

Kết luận:

Với chức năng chia sẻ địa chỉ bản đồ của google máp. Chúng ta có thể dễ dàng chèn địa chỉ bản đồ công ty của chúng ta vào website.

Chúc các bạn thành công!

By laptrinhphp.info

Từ khóa » Gắn Google Map Vào Web