DEV/Javascript
Javascript Google Map 사용하기
혜성 Hyesung
2019. 12. 13. 19:38
반응형
구글맵 API 설정
<script src="https://maps.googleapis.com/maps/api/js?key=APIkey넘버&callback=setMap(페이지 랜더링시 호출함수)" async defer></script>
구글맵 세팅하기
|
1
2
3
4
5
6
7
8
|
setMap = function(){
document.getElementById(id), {zoom: zoom, center : latlng}
)
}
r
|
id : 지도를 표시하고자하는 html tag id 값
zoom : 저는 객인적으로 11로 setting 하였고 필요에 따라 바꿔가며 쓰면됨
latlng : 지도의 중심을 설정하는 파라메터. json 형태로 위, 경도를 넘겨주면 됨
ex)
latlng = new google.maps.LatLng(lat,lng);
console.log(latlng)
output:
{
lat:23
lng:125
}
구글맵에 마크 표시하기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
var tmpLatLng = {
lat: parseFloat(lat_),
lng: parseFloat(lng_)
};
var markers =[]; //생선한 마크 객체를 담을 리스트(그릇)
position: tmpLatLng,
map: map,
icon: {
url: "/static/assets/icon.png"
}
});
|
position : 마크를 표시하고자 하는 위치
map : 위에서 생성한 구글맵 객체
url : 자신이 사용하고 싶은 마크 이미지(스태틱) 파일 경로
구글맵 마크 지우기
|
1
2
3
4
5
6
7
|
deleteMarkers = function (markers) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(null);
}
}
deleteMarkers(markers);
|
markers: 위에서 생성한 마커 객체들을 담아 놓은 리스트
구글맵 원(반경) 그리기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
drawCircleOnMap = function (centerLat, centerLng, radius) {
if(circle){
}
strokeColor: '#4169e1',
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: '#4169e1', //원 내부 색깔
fillOpacity: 0.2,
center: {
lat: centerLat, //원의 중심 위도, 경도
lng: centerLng
},
radius: Number(radius) //원의 반경
});
}
drawCircleOnMap(lat,lng,500);`
|
구글맵 히트맵 그리기
|
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
|
function ajax_inflow_heatmap(json) {
var gradient = [
'rgba(255,255,255, 0)',
'rgba(255, 255, 180, 0.8)',
'rgba(255, 230, 150, 0.8)',
'rgba(255, 191, 115, 0.8)',
'rgba(255, 166, 99, 0.8)',
'rgba(255, 140, 84, 0.8)',
'rgba(225, 115, 69, 0.8)',
'rgba(255, 89, 54, 0.8)',
'rgba(255, 64, 38, 0.8)',
'rgba(255, 26, 15, 0.8)'
// 'rgba()',
// '#ffff99', '#fff291', '#ffe68a', '#ffcc7a',
// '#ffbf73', '#ffb26b', '#ffa663', '#ff995c',
// '#ff8c54', '#ff804c', '#ff7345', '#ff663d',
// '#ff5936', '#ff4c2e', '#ff4026', '#ff331f',
// '#ff0000', '#ff0d08', '#ff1a0f', '#ff2617'
];
var areas = json['areas']; //지역리스트
var lats = json['lats']; //위도리스트
var lngs = json['lngs']; //경도리스트
var ratios = json['ratios']; //weight 리스트
//$('#inflow-max').text(ratios[0]);
var heatMapDatas = []; //히트맵 JSON 형태의 파라매터 담을 리스트
for (var i in areas) {
var weight = ratios[i] * 10;
var heatMapData = {
location: location,
weight: weight //weight 에 따라 히트맵의 색깔이 변함
};
}
data: heatMapDatas JSON //파라미터 담고 있는 리스트
});
if(prevHeatmap){
}
heatmap.setMap(map); //위에서 생성한 지도 객체
prevHeatmap = heatmap;
})
}
|
구글맵 info window 창 띄우기
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
if (infoWindow){
infoWindow.close(); //생성한 window 객체가 있다면 지우고 시작
};
function popWindowInfo(info1,info2,info3,windowLatlng){
var contents = "<div>"+"나비"+"<span class ='color_b'>"+"500m"+"</span>"+"</div>"+
"<div>"+'우유 '+"<span class ='color_b'>"+"원숭이"+"</span>"+"</div>"+
"<div>"+'어여 '+"<span class ='color_b'>"+"개구리" +"</span>"+"</div>"+
"<div>"+'아야 '+"<span class ='color_b'>"+"호랑이"+"</span>"+"</div>"+
"<div>"+"<a style ='color :blue' onclick='호출하고 싶은 함수;'>"+"가나다라마바사"+"</a>"+"</div>";
infoWindow.setOptions({
content: contents, //info창에 띄우고 싶은 메세지
})
infoWindow.setPosition(windowLatlng); //info창 위치 설정
infoWindow.open(map); //위에서 생성한 구글맵 객체에 info창 띄움
}
|
기타
- 구글맵 마우스 휠로 zoom in and out 기능 활성화하기
구글맵 객체 생성시 파라메터로 gestureHandling : 'greedy' 추가
|
1
2
3
4
5
6
7
8
9
10
11
12
|
- 구글맵 마커 커스터마이징
마커 객체 생성시 cdn 값을 넘겨주면 된다.
참고
https://developers.google.com/maps/documentation/javascript/markers
|
1
2
3
4
5
6
7
|
반응형