Cách chèn Google Map vào trong website
Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google. Thường thì Google Maps hay được tích hợp vào các trang liên hệ, vì như thế sẽ tạo cho người dùng dễ dàng tìm kiếm địa chỉ khách hàng cũng như làm cho website của chúng ta thân thiện với ...
Google Maps là một dịch vụ ứng dụng và công nghệ bản đồ trực tuyến trên web miễn phí được cung cấp bởi Google. Thường thì Google Maps hay được tích hợp vào các trang liên hệ, vì như thế sẽ tạo cho người dùng dễ dàng tìm kiếm địa chỉ khách hàng cũng như làm cho website của chúng ta thân thiện với người dùng hơn.
Hôm nay mình sẽ bày 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>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
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);
</script>
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í đó là okie.
<div id="googleMap" style="awidth: 600px; height: 230px;">Google Map</div>
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 awidth và height là xong.
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 nhé, mình 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 !
Chuyên Mục: Javascript
Bài viết được đăng bởi webmaster
