채택완료
한페이지 안에 네이버지도 API 두개 사용하려면 어디를 수정해야 하나요?
네이버 지도 API 소스에서 주소만 다르게 해서 한페이지 안에 지도를 두개 넣고 싶은데요.
아래의 두개 소스 어디를 바꿔주어야 할까요?
감사합니다.
Copy
<div id="map" style="width:800px;height:500px;"></div>
<script>
var map = new naver.maps.Map('map');
var myaddress = '영흥북로 19';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!)
naver.maps.Service.geocode({address: myaddress}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
}
var result = response.result;
// 검색 결과 갯수: result.total
// 첫번째 결과 결과 주소: result.items[0].address
// 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x
var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);
map.setCenter(myaddr); // 검색된 좌표로 지도 이동
// 마커 표시
var marker = new naver.maps.Marker({
position: myaddr,
map: map
});
// 마커 클릭 이벤트 처리
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
// 마크 클릭시 인포윈도우 오픈
var infowindow = new naver.maps.InfoWindow({
content: '<h4> [네이버 개발자센터]</h4><a href="https://developers.naver.com" target="_blank"><img src="https://developers.naver.com/inc/devcenter/images/nd_img.png"></a>'
});
});
</script>
Copy
<div id="map" style="width:800px;height:500px;"></div>
<script>
var map = new naver.maps.Map('map');
var myaddress = '연안부두로 41';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!)
naver.maps.Service.geocode({address: myaddress}, function(status, response) {
if (status !== naver.maps.Service.Status.OK) {
return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러');
}
var result = response.result;
// 검색 결과 갯수: result.total
// 첫번째 결과 결과 주소: result.items[0].address
// 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x
var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y);
map.setCenter(myaddr); // 검색된 좌표로 지도 이동
// 마커 표시
var marker = new naver.maps.Marker({
position: myaddr,
map: map
});
// 마커 클릭 이벤트 처리
naver.maps.Event.addListener(marker, "click", function(e) {
if (infowindow.getMap()) {
infowindow.close();
} else {
infowindow.open(map, marker);
}
});
// 마크 클릭시 인포윈도우 오픈
var infowindow = new naver.maps.InfoWindow({
content: '<h4> [네이버 개발자센터]</h4><a href="https://developers.naver.com" target="_blank"><img src="https://developers.naver.com/inc/devcenter/images/nd_img.png"></a>'
});
});
</script>답변 1개 / 댓글 2개
채택된 답변
+20 포인트
eyekiss
2018-06-23 (토) 02:06:42
님이 올리신 주소 호출하는 소스가 오류가 나서,
네이버에서 최신 소스로 넣었습니다.
Copy
<div id="map" style="width:800px;height:500px;"></div>
<script>
var map = new naver.maps.Map("map", {
center: new naver.maps.LatLng(37.3595316, 127.1052133),
zoom: 10,
mapTypeControl: true
});
var infoWindow = new naver.maps.InfoWindow({
anchorSkew: true
});
map.setCursor('pointer');
// result by latlng coordinate
function searchAddressToCoordinate(address) {
naver.maps.Service.geocode({
address: address
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
return alert('Something Wrong!');
}
var item = response.result.items[0],
addrType = item.isRoadAddress ? '[도로명 주소]' : '[지번 주소]',
point = new naver.maps.Point(item.point.x, item.point.y);
infoWindow.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 주소 : '+ response.result.userquery +'</h4><br />',
addrType +' '+ item.address +'<br />',
'</div>'
].join('\n'));
map.setCenter(point);
infoWindow.open(map, point);
});
}
naver.maps.onJSContentLoaded = searchAddressToCoordinate('영흥북로 19');
</script>
<div id="map2" style="width:800px;height:500px;"></div>
<script>
var map2 = new naver.maps.Map("map2", {
center: new naver.maps.LatLng(37.3595316, 127.1052133),
zoom: 10,
mapTypeControl: true
});
var infoWindow2 = new naver.maps.InfoWindow({
anchorSkew: true
});
map2.setCursor('pointer');
// result by latlng coordinate
function searchAddressToCoordinate(address) {
naver.maps.Service.geocode({
address: address
}, function(status, response) {
if (status === naver.maps.Service.Status.ERROR) {
return alert('Something Wrong!');
}
var item = response.result.items[0],
addrType = item.isRoadAddress ? '[도로명 주소]' : '[지번 주소]',
point = new naver.maps.Point(item.point.x, item.point.y);
infoWindow2.setContent([
'<div style="padding:10px;min-width:200px;line-height:150%;">',
'<h4 style="margin-top:5px;">검색 주소 : '+ response.result.userquery +'</h4><br />',
addrType +' '+ item.address +'<br />',
'</div>'
].join('\n'));
map2.setCenter(point);
infoWindow2.open(map2, point);
});
}
naver.maps.onJSContentLoaded = searchAddressToCoordinate('연안부두로 41');
</script>답변에 대한 댓글 2개
답변을 작성하려면 로그인이 필요합니다.