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 [...]
Th9
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ó [...]
Th9
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 [...]
Th5
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 [...]
Th4
Tạo đăng nhập trên website với tài khoản google
Bạn cần người dùng vào website của bạn đăng nhập mà không cần phải đăng [...]
Th4
Xác thực người dùng với tài khoản facebook
Code xác thực người dùng trên website dựa trên tài khoản của facebook. Bạn có [...]
Th4