이 코드 그대로 적용하면 주소 설정할 때마다 마커가 계속 찍혀 맵 하나에 여러 마커가 생긴다.
맵 마커 제거 코드는 여기에서 참고하면 될 것 같다.
그리고 Google Map API 사용할 때 key 파라미터에는 구글에서 발급받은 API_KEY를 사용한다.
|
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
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<style>
html,
body,
#google-map {
width: 100%;
height: 100%;
margin: 0;
padding: 0
}
#search-panel {
position: absolute;
top: 10px;
left: 25%;
z-index: 5;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid black;
text-align: center;
padding: left: 10px
}
</style>
<title></title>
</head>
<body>
<div id="search-panel">
<input id="address" type="text" value="주소 입력값" />
<button id="submit" type="button" value="Geocode">지도 검색</button>
</div>
<div id="google-map">
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!-- Google Map API -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
<script>
/**
* Google Map API 주소의 callback 파라미터와 동일한 이름의 함수이다.
* Google Map API에서 콜백으로 실행시킨다.
*/
function initMap() {
console.log('Map is initialized.');
/**
* 맵을 설정한다.
* 1번째 파라미터 : 구글 맵을 표시할 위치. 여기서는 #google-map
* 2번째 파라미터 : 맵 옵션.
* ㄴ zoom : 맵 확대 정도
* ㄴ center : 맵 중심 좌표 설정
* ㄴ lat : 위도 (latitude)
* ㄴ lng : 경도 (longitude)
*/
var map = new google.maps.Map(document.getElementById('google-map'), {
zoom: 12.5,
center: {
lat: -34.397,
lng: 150.644
}
});
/**
* Google Geocoding. Google Map API에 포함되어 있다.
*/
var geocoder = new google.maps.Geocoder();
// submit 버튼 클릭 이벤트 실행
document.getElementById('submit').addEventListener('click', function() {
console.log('submit 버튼 클릭 이벤트 실행');
// 여기서 실행
geocodeAddress(geocoder, map);
});
/**
* geocodeAddress
*
* 입력한 주소로 맵의 좌표를 바꾼다.
*/
function geocodeAddress(geocoder, resultMap) {
console.log('geocodeAddress 함수 실행');
// 주소 설정
var address = document.getElementById('address').value;
/**
* 입력받은 주소로 좌표에 맵 마커를 찍는다.
* 1번째 파라미터 : 주소 등 여러가지.
* ㄴ 참고 : https://developers.google.com/maps/documentation/javascript/geocoding#GeocodingRequests
*
* 2번째 파라미터의 함수
* ㄴ result : 결과값
* ㄴ status : 상태. OK가 나오면 정상.
*/
geocoder.geocode({'address': address}, function(result, status) {
console.log(result);
console.log(status);
if (status === 'OK') {
// 맵의 중심 좌표를 설정한다.
resultMap.setCenter(result[0].geometry.location);
// 맵의 확대 정도를 설정한다.
resultMap.setZoom(18);
// 맵 마커
var marker = new google.maps.Marker({
map: resultMap,
position: result[0].geometry.location
});
// 위도
console.log('위도(latitude) : ' + marker.position.lat());
// 경도
console.log('경도(longitude) : ' + marker.position.lng());
} else {
alert('지오코드가 다음의 이유로 성공하지 못했습니다 : ' + status);
}
});
}
}
</script>
</body>
</html>
|
cs |