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>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
|
<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.
|
1
|
<div id=”googleMap” style=”width: 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 width 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.
Bài viết liên quan
DEVOPS LÀ GÌ?
DEVOPS LÀ GÌ? Devops là gì Theo Wikipedia Devops là thuật ngữ chỉ tập hợp các hoạt [...]
Sep
Database là gì?
Database là gì? Database được gọi là Cơ sở dữ liệu, là một bộ sưu tập dữ liệu có [...]
Sep
Tạo Responsive và Mobile-Friendly Tooltip bằng jQuery
Việc tìm kiếm một chức năng Tooltip phù hợp với website hay blog thì không [...]
May
Code tự động lưu ảnh vào host khi copy bài từ nguồn khác
Như tiêu tiêu đề thôi hôm nay mình sẽ share đoạn code tự động lưu [...]
Apr
Tài liệu lập trình về Yii framework
Tài liệu lập trình về Yii framework Yii không phải là cái gì đó mới [...]
Dec
Sypex Dumper: Upload và backup dữ liệu lớn – hướng dẫn sử dụng Sypex Dumper
Xin chào các bạn, lần trước tôi có đăng bài viết làm thế nào để [...]
Sep