한페이지 안에 네이버지도 API 두개 사용하려면 어디를 수정해야 하나요?
본문
네이버 지도 API 소스에서 주소만 다르게 해서 한페이지 안에 지도를 두개 넣고 싶은데요.
아래의 두개 소스 어디를 바꿔주어야 할까요?
감사합니다.
<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>
<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
님이 올리신 주소 호출하는 소스가 오류가 나서,
네이버에서 최신 소스로 넣었습니다.
<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>
감사합니다~!!
감사합니다~
답변을 작성하시기 전에 로그인 해주세요.
