Giáo Trình Hay
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.
