[FAQ] 지도/로컬 API 문의 전 꼭 읽어 주세요.
https://devtalk.kakao.com/t/faq-api/125610
현재 백틱안에 넣어서 html과 함께 출력할려고하는데 혹시 안되나요? 스크립트 밖에
삽입하면 잘 실행이 되는데 백틱안에서만 안되더라구요 혹시 피드백 가능할까요?문의주신 내용으로는 어떤 상황인지 알 수 없어서 정확한 확인을 위해 작성한 코드도 함께 첨부해주세요.
1개의 좋아요
<main class="partyPage partyDetail main container"></main>
**여기에 삽입하면 지도가 나오는데 원하는 위치가 아니구여<div id="map" style=" width:45%;height:100%; "></div>**
<script>
const partyId = window.location.pathname.split('/')[2];
$.ajax({
type: 'GET',
url: `/api/party/${partyId}`,
data: {},
headers: {
authorization: `Bearer ${sessionStorage.getItem('accessToken')}`,
refreshtoken: `${sessionStorage.getItem('refreshToken')}`,
},
success: function (response) {
sessionStorage.setItem('party', JSON.stringify(response));
console.log(response)
const {
hostId,
title,
content,
maxMember,
currMember,
thumbnails,
date,
status,
thumbnail,
tag,
// user,
} = response;
console.log(maxMember)
const tagHtml =
tag.length > 0
? tag.map((tag) =>
`<li class="tagItem">
#${tag.tagName}
</li>`
).join('')
: ``;
const partyImageHtml =
thumbnail.length > 0
? thumbnail.map((thumbnail) => `
<li class="partyImageItem">
<img src="${thumbnail.thumbnail}" alt="" class="partyImage" />
</li>
`).join('')
: `
<li class="partyImageItem">
<img src="https://velog.velcdn.com/images/tjdtn4484/post/99a19289-f4a8-4442-a949-3797436031e0/image.PNG" alt="" class="partyImage" />
</li>`;
// const hostProfileSrc =
// user.profile ??
// `https://velog.velcdn.com/images/tjdtn4484/post/99a19289-f4a8-4442-a949-3797436031e0/image.PNG" alt="" class="partyImage`;
const html = `
<header class="mainHeader">
<h2 class="title">
${title}
</h2>
<ul class="tagList">
${tagHtml}
</ul>
<div class="column2">
<dl class="headcountList">
<div class="headcountItem">
<dt>현재 참여 인원</dt>
<dd>
${currMember}
</dd>
</div>
<div class="headcountItem">
<dt>총 인원</dt>
<dd>
${maxMember}
</dd>
</div>
</dl>
<button type="button" class="partyLikeButton" aria-label="좋아요 목록에 추가 버튼">
<i class="bx bxs-heart" aria-hidden="true"></i>
</button>
</div>
</header>
<div class="mainSection">
<section class="partyImageSection">
<h3 class="a11yHidden">파티 이미지</h3>
<ul class="partyImageList">
${partyImageHtml}
</ul>
<div class="partyImageButtonWrapper">
<button
type="button"
class="partyImageButton prev"
aria-label="이전 파티 이미지 보기"
>
<i class="bx bx-chevron-left" aria-hidden="true"></i>
</button>
<button
type="button"
class="partyImageButton next"
aria-label="다음 파티 이미지 보기"
>
<i class="bx bx-chevron-right" aria-hidden="true"></i>
</button>
</div>
</section>
<div class="partyInfoWrapper">
<section class="IntroduceSection">
<h3 class="a11yHidden">파티 소개</h3>
<p>
${content}
</p>
</section>
<section class="calendarSection">
<h3 class="a11yHidden">달력</h3>
<div class="calendar"></div>
<div class="calendarButtonWrapper">
<button type="button" class="btn_primary btn_point" onclick="applyParty(${partyId})">파티신청</button
><button type="button" class="btn_primary" onclick="cancelParty(${partyId})">신청취소</button>
</div>
</section>
<section class="regionSection">
<h3 class="title">지역</h3>
<p>
</p>
**여기에 삽입하면 지도가 나오질 않습니다 <div id="map" style=" width:45%;height:100%; "></div>**
<!-- 지도 삽입 -->
</section>
<section class="hostSection">
<h3 class="a11yHidden">호스트 정보</h3>
<div class="hostInfoWrapper">
<a href="/party-host-detail/${hostId}" class="hostInfoLink">
<figure class="hostFigure">
<div class="hostImageWrapper">
<img src="" alt="" />
</div>
<figcaption>
<h3 class="hostTitle">호스트</h3>
<p class="hostName">
</p>
<p class="a11yHidden">호스트 정보 더보기</p>
</figcaption>
</figure>
</a>
<a href="/party-host-message" class="hostContactLink">호스트에게 연락하기</a>
</div>
</section>
</div>
</div>`;
$('.partyPage').append(html);
if(document.querySelector('.partyPage')){
new Calendar(document.querySelector('.partyPage .calendar'));
document.querySelector('time[datetime="2023-03-03"]').classList.add("selected")
document.querySelector('.today').classList.remove('today')
const partyDetailSlide = tns({
container: '.partyDetail .partyImageList',
slideBy: 'page',
controlsContainer: '.partyImageButtonWrapper',
autoplay: true,
autoplayButtonOutput: false,
});
}
},
});
function applyParty(partyId) {
$.ajax({
type: 'POST',
url: `/api/party/apply/${partyId}`,
data: {},
headers: {
authorization: `Bearer ${sessionStorage.getItem('accessToken')}`,
refreshtoken: `${sessionStorage.getItem('refreshToken')}`,
},
success: function (response) {
customAlert(
'신청되었습니다.',
function () {
window.location.reload();
},
)
},
error: function (error) {
customAlert(
error.responseJSON.message,
function () {
window.location.reload();
},
);
},
})
}
function cancelParty(partyId) {
$.ajax({
type: 'DELETE',
url: `/api/party/apply-cancel/${partyId}`,
data: {},
headers: {
authorization: `Bearer ${sessionStorage.getItem('accessToken')}`,
refreshtoken: `${sessionStorage.getItem('refreshToken')}`,
},
success: function (response) {
customAlert(
"취소되었습니다.",
function () {
window.location.reload();
},
)
},
error: function (error) {
customAlert(
error.responseJSON.message,
function () {
window.location.reload();
},
);
},
})
}
</script>
`.
````코드`id가 map인 요소를 찾지 못해서 지도가 생성되지 않은 것 같습니다.
지도가 표시될 Element가 화면에 렌더링 된 다음 지도를 생성해주세요.
<div id="wrap"></div>
<script>
const html = '<div id="map" style="width: 100%; height:350px"></div>';
$('#wrap').append(html);
const mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.402054, 127.1082099), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
const map = new kakao.maps.Map(mapContainer, mapOption);
</script>