Làm sao để chèn Google Map vào website ?

Làm sao để chèn Google Map vào website ?
      Accelerated Mobile Pages

Ứng dụng bản đồ trực tuyến trên web miễn phí - Google Maps là một trong những ứng dụng được cung cấp bởi Google, có chức năng hỗ trợ người dùng tìm kiếm...

Ứng dụng bản đồ trực tuyến trên web miễn phí - Google Maps là một trong những ứng dụng được cung cấp bởi Google, có chức năng hỗ trợ người dùng tìm kiếm địa chỉ khách hàng cũng như làm cho [website] trở nên thân thiện hơn.

chen maps 
Ứng dụng Google Maps

Hôm nay chúng tôi sẽ hướng dẫn cho các bạn từng bước chèn Google Maps vào website như sau:

Bước 1 : Chèn đoạn script sau bên trong thẻ "< head> " 
  var gmap = new google.maps.LatLng(10.765974,106.689422); var marker; function initialize() { var mapProp = { center:new google.maps.LatLng(10.765974,106.689422), zoom:16, mapTypeId:google.maps.MapTypeId.ROADMAP }; var map=new google.maps.Map(document.getElementById("googleMap") ,mapProp); var styles = [ { featureType: 'road.arterial', elementType: 'all', stylers: [ { hue: '#fff' }, { saturation: 100 }, { lightness: -48 }, { visibility: 'on' } ] },{ featureType: 'road', elementType: 'all', stylers: [ ] }, { featureType: 'water', elementType: 'geometry.fill', stylers: [ { color: '#adc9b8' } ] },{ featureType: 'landscape.natural', elementType: 'all', stylers: [ { hue: '#809f80' }, { lightness: -35 } ] } ]; var styledMapType = new google.maps.StyledMapType(styles); map.mapTypes.set('Styled', styledMapType); marker = new google.maps.Marker({ map:map, draggable:true, animation: google.maps.Animation.DROP, position: gmap }); google.maps.event.addListener(marker, 'click', toggleBounce); } function toggleBounce() { if (marker.getAnimation() !== null) { marker.setAnimation(null); } else { marker.setAnimation(google.maps.Animation.BOUNCE); } } google.maps.event.addDomListener(window, 'load', initialize);


Bước 2 : Bây giờ, nếu muốn Google Maps hiển thị ở đâu thì chỉ cần dán đoạn code này vào ngay tại vị trí đó. 
Google Map


Tuy nhiên có một vài cái các bạn cần chỉnh sửa cho phù hợp với vị trí cần hiển thị trên bản đồ.

- Thứ nhất : tại dòng code var gmap = new google.maps.LatLng(10.765974,106.689422); ở bước 1. Các bạn nhớ đổi giá trị 10.765974,106.689422 là các giá trị thể hiện vị trí trên bản đồ của các bạn. Các bạn có thể tìm vị trí này ngay trên trang Google Maps.

- Thứ hai : Tại bước 2 , các bạn có thể thay đổi kích thước hiển thị bản đồ bằng cách thay đổi kích thước width và height.

Nếu còn có gì chưa hiểu, thì đừng ngần ngại để lại lời nhắn dưới dạng comments dưới đây, chúng tôi sẽ giúp các bạn hoàn thành bài viết này.

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