Hướng dẫn nhúng google map vào website

Bước 4: Click vào chữ Nhúng bản đồ trên popup rồi nhấn SAO CHÉP HTML như vậy là bạn đã lấy xong mã nhúng bản đồ địa chỉ bạn muốn nhúng. Giờ bạn chỉ việc đem mã HTML này gắn vào vị trí đặt mã nhúng trong trang quản trị web của bạn là được. 

Click vào nhúng bản đồ và chọn sao chép HTML là bạn đã lấy mã nhúng thành công

Lưu ý: Vì bộ quản trị web của mỗi công ty thiết kế web có thể khác nhau nên mình không chỉ chi tiết các bạn là vào mục nào trong trang quản trị nội dung để dán mã nhúng bản đồ, mà mình chỉ hướng dẫn các bạn đến phần lấy mã nhúng thôi. Còn gắn mã nhúng ở vị trí nào thì khi người làm web cho bạn bàn giao sản phẩm họ sẽ hướng dẫn bạn phải vào đâu để gắn mã nhúng.

Thiết kế website wordpress theo yêu cầu tùy biến giúp quản trị website đơn giản dễ dàng bạn có thể tự mình thay đổi  Cách chèn mã nhúng bản đồ vào website wordpress thật đơn giản với những hướng dẫn cơ bản, bạn có thể tự mình thay đổi sửa lại nội dung địa điểm trên website sao cho phù hợp nhất

Lợi ích của việc chèn bản đồ Google map vào website wordpress

– Tạo cho người dùng khi ghé thăm website của bạn biết được vị trí địa điểm nơi bán hàng cung cấp dịch vụ của bạn.
– Không sử dụng thông qua một website về địa điểm nào mà vẫn có thể tìm thấy địa điểm cần ghé tới.
– Ghi chú một cách trực quan nhất về địa điểm. Đảm bảo cho bạn có đầy đủ tính năng của một trang LIÊN HỆ – GIỚI THIỆU hay ngay trên TRANG CHỦ của website wordpress.

Sau đây là các bước hướng dẫn cụ thể. Bạn có thể tự mình làm theo để lấy mã code chèn vào website của bạn:

1. Mở Google Maps.
2. Điền địa chỉ chính xác cụ thể vào thanh  “Tìm kiếm trên Google map” 
3. Ở góc trên cùng bên trái, nhấp vào menu chính 
   ​.
4. Nhấp vào Chia sẻ hoặc nhúng bản đồ.
5. Ở trên cùng của hộp xuất hiện, hãy chọn tab Nhúng bản đồ.Coppy toàn bộ đoạn mã bên dưới để dán vào website
6. Sao chép và dán mã code chia sẻ này vào website của bạn. Sau khi pase đoạn code iframe vào bạn có thể chỉnh sửa lại kích thước cần được hiển thị sao cho phù hợp

Đối với website wordpress bạn muốn chèn bản đồ vào sẽ có các bước sau :

Bảng tin -> giao diện -> widget -> tìm đến mục cần hiển thị bản đồ như Footer , slidebar hay Home -> pase mã nhúng vào Visual Editor hoặc văn bản rồi sửa lại kích thước sao cho phù hợp với website -> lưu thay đổi

Chỉ cần vài thao tác đơn giản bạn đã có thể tự mình thay đổi thêm bản đồ vị trí chính xác vào website wordpress của bạn nhanh chóng dễ dàng rồi đấy

Trước khi bắt đầu, chúng ta cần có key của Google Maps APIs dành cho developer. Với một tài khoản Google bất kỳ, bạn có thể dễ dàng đăng ký cho mình một key bằng link sau.

Tất nhiên, với mỗi tài khoản miễn phí thì bạn sẽ bị giới hạn 25000 lần load bản đồ trong 1 ngày - thế chắc là cũng quá đủ để bạn nghịch rồi nhỉ

, xem thêm chi tiết ở giới hạn sử dụng

Mình xin bắt đầu với một ví dụ đơn giản nhất khi tích hợp Google map vào web.

Bạn có thể thêm một số params như

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

6,

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

7... vào cho src ở đây để xác định ngôn ngữ, vùng địa lý,.. mà bạn cần.

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

Khởi tạo một

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

8 mới đơn giản nhất bằng như sau :

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

Khi khởi tạo map sẽ có các thuộc tính như

#map {
  height: 100%;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

9,

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

0, cùng với một số control như

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

1,

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

2,

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

3,

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

4.... Tìm hiểu thêm ở đây

Xem demo ở đây

Với ví dụ trên đây thì bạn đã có thể tích hợp Google map vào web của mình, bạn có thể kéo hay là zoom trên đó. Tuy nhiên, Google cung cấp cho các lập trình viên [ngay cả ở bản miễn phí] nhiều tính năng rất tuyệt vời mà chúng ta cần tìm hiểu thêm để có thể sử dụng. Bạn gần như chỉ việc tùy chỉnh, thay đổi trong

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

5 mà thôi.

Bài viết này mình xin trình bày những phần theo mình là cơ bản và cũng hay gặp nhất bạn mà cần biết khi tích hợp Google map.

Marker

Marker dùng để xác định, đánh dấu một vị trí trên bản đồ, bạn có thể đánh dấu một hoặc nhiều điểm.

Sau khi khởi tạo một map, ở đây chúng ta sẽ khởi tạo một marker mới bằng

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

6 ngay trong hàm

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

7 :

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

Nếu cần đánh dấu nhiều điểm trên bản đồ thì bạn chỉ việc khởi tạo nhiều

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

6 tương tự. Mặc định sẽ dùng icon như hình để đánh dấu nhưng chúng ta có thể thay đổi bằng thuộc tính

function initMap[] {
  var map = new google.maps.Map[document.getElementById["map"], {
    center: { lat: 21.0168864, lng: 105.7855574 },
    zoom: 15
  }];
}

9 khi khởi tạo marker.

Bạn cũng có thể làm nhiều việc với marker, xem thêm ví dụ ở đây.

Geolocation [geographic locaion]

Cho ta biết thông tin chi tiết của từng địa điểm trên bản đồ.

Chỉ cần truyền tọa độ vào đối tượng

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

0, chúng ta sẽ có có danh sách các điểm có thể thỏa mãn với tọa độ đó, thường thì sẽ là điểm đầu tiên trong danh sách đó sẽ chính xác nhất.

Với mỗi điểm trên bản đồ, ta có các phương thức như

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

1,

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

2... để xem thông tin về tên, tọa độ, id ... của điểm đó. Ở ví dụ dưới đây mình sẽ kết hợp với

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

3 để in một vài thông tin của điểm đó trong một khung nhỏ trên bản đồ :

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // create marker for position is latLng
  // code

  var geocoder = new google.maps.Geocoder; // create new geocoder
  var infowindow = new google.maps.InfoWindow[]; // create new infoWindow

  geocoder.geocode[
    { "location": latLng },
    function[results, status] {
      if [status === google.maps.GeocoderStatus.OK] {
        if [results[0]] {
          // set content for infowindow
          infowindow.setContent[
            "
" +
              "Address : " + results[0].formatted_address + "
" +
              "Latitude : " + results[0].geometry.location.lat[] + "
" +
              "Longitude : " + results[0].geometry.location.lng[] +
            "
"
          ];

          // print infowindow in map
          infowindow.open[map, marker];
        } else {
          console.log["No results found"];
        }
      } else {
        console.log["Geocoder failed due to: " + status];
      }
    }
  ];
}

Xem các ví dụ khác ở đây

Sự kiện

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

4

Đây là phần rất hay mà Google đã cung cấp cho lập trình viên khi làm việc với map. Ta bắt sự kiện click cho map bằng

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

5. Với ví dụ bên dưới, khi bạn click vào một điểm bất kỳ trên bản đồ, thì hệ thống sẽ thực hiện :

• Xóa điểm đánh dấu trước đó [nếu có].

• Đánh dấu một điểm mới với cửa sổ mô tả thông tin.

• Bản đồ chuyển trung tâm về vị trí điểm mới được đánh dấu đó.

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }
  var markers = [];

  // create map with center is latLng
  // code

  var geocoder = new google.maps.Geocoder;
  var infowindow = new google.maps.InfoWindow[];

  map.addListener["click", function[e] {
    // Clear all old markers after click
    for [var i = 0; i 

Trong hàm javascript, ta sẽ tạo mới một đối tượng

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // each marker define one point
  var marker = new google.maps.Marker[{
    position: latLng,
    map: map,
  }];
}

9 với từ khóa tìm kiếm, sau đó sẽ bắt sự kiện

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // create marker for position is latLng
  // code

  var geocoder = new google.maps.Geocoder; // create new geocoder
  var infowindow = new google.maps.InfoWindow[]; // create new infoWindow

  geocoder.geocode[
    { "location": latLng },
    function[results, status] {
      if [status === google.maps.GeocoderStatus.OK] {
        if [results[0]] {
          // set content for infowindow
          infowindow.setContent[
            "
" +
              "Address : " + results[0].formatted_address + "
" +
              "Latitude : " + results[0].geometry.location.lat[] + "
" +
              "Longitude : " + results[0].geometry.location.lng[] +
            "
"
          ];

          // print infowindow in map
          infowindow.open[map, marker];
        } else {
          console.log["No results found"];
        }
      } else {
        console.log["Geocoder failed due to: " + status];
      }
    }
  ];
}

0 cho đối tượng đó và xử lý cụ thể :

var input = [document.getElementById["pac-input"]];
map.controls[google.maps.ControlPosition.TOP_LEFT].push[input];
var autocomplete = new google.maps.places.Autocomplete[input];
autocomplete.bindTo["bounds", map];

autocomplete.addListener["place_changed", function[] {
  // code for
}];

Bạn có thể xem demo đơn giản ở đây.

Place search box

Tính năng này cũng giúp ta tìm kiếm địa chỉ như

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // create marker for position is latLng
  // code

  var geocoder = new google.maps.Geocoder; // create new geocoder
  var infowindow = new google.maps.InfoWindow[]; // create new infoWindow

  geocoder.geocode[
    { "location": latLng },
    function[results, status] {
      if [status === google.maps.GeocoderStatus.OK] {
        if [results[0]] {
          // set content for infowindow
          infowindow.setContent[
            "
" +
              "Address : " + results[0].formatted_address + "
" +
              "Latitude : " + results[0].geometry.location.lat[] + "
" +
              "Longitude : " + results[0].geometry.location.lng[] +
            "
"
          ];

          // print infowindow in map
          infowindow.open[map, marker];
        } else {
          console.log["No results found"];
        }
      } else {
        console.log["Geocoder failed due to: " + status];
      }
    }
  ];
}

1, tuy nhiên ngoài việc có thể tìm kiếm chính xác theo tên thì bạn có thể tìm kiếm một tập hợp các địa chỉ thoả mã từ khóa tìm kiếm. Bạn có thể xem chi tiết ở đây

Ở đây chúng ta sẽ làm việc với

function initMap[] {
  var latLng = { lat: 21.0168864, lng: 105.7855574 }

  // create map with center is latLng
  // code

  // create marker for position is latLng
  // code

  var geocoder = new google.maps.Geocoder; // create new geocoder
  var infowindow = new google.maps.InfoWindow[]; // create new infoWindow

  geocoder.geocode[
    { "location": latLng },
    function[results, status] {
      if [status === google.maps.GeocoderStatus.OK] {
        if [results[0]] {
          // set content for infowindow
          infowindow.setContent[
            "
" +
              "Address : " + results[0].formatted_address + "
" +
              "Latitude : " + results[0].geometry.location.lat[] + "
" +
              "Longitude : " + results[0].geometry.location.lng[] +
            "
"
          ];

          // print infowindow in map
          infowindow.open[map, marker];
        } else {
          console.log["No results found"];
        }
      } else {
        console.log["Geocoder failed due to: " + status];
      }
    }
  ];
}

2.

allows users to perform a text-based geographic search, such as 'pizza in New York' or 'shoe stores near robson street'

Sau đây bạn có thể xem demo của mình. Demo này là tổng hợp tất cả những tính năng mà mình đã đề cập ở trên.