지도에서 infowindow 구성시 문의드립니다

안녕하세요.
샘플에 있는 방식으로는 구현이 잘 됩니다.
content: ‘<div style=“width:150px;text-align:center;padding:6px 0;”>우리회사’

하지만 실제로 웹 페이지에 넣고 돌리면
content: '
<div style=“width:150px;text-align:center;padding:6px 0;”>우리회사

와 같은 형식으로 나오게 되서
Invalid or unexpected token 오류가 발생하네요.
크롬과 IE11 에서 다 나타납니다.

어떻게 해결해야하나요?
줄바꿈제거, 공백제거 다 안먹히네요.
html 코드가 들어가면 저렇게 되는거 같습니다.

파싱 단계에서 syntax에러가 나는 경우는 애초에 코드의 문법이 맞지 않는 경우이며
같은 코드를 쓰는 apis.map.daum.net 예제들은 잘 동작하고 있습니다.

코드 전체를 살펴보시고,
여는 따옴표와 닫는 따옴표(그게 홑따옴표든 쌍따옴표든)가 잘 맞는지 확인 부탁드립니다.
혹은 다른 HTML 태그들이 쌍으로 잘 닫혀있는지 확인 부탁드립니다.

content값으로 쓰는 문자열은 따옴표가 번갈아가며 쓰여지기 때문에
위에 말씀드린 이유로 문제가 생길 가능성이 높습니다.

샘플에 있는 코드를 넣어도
html에서는 되고 테스트로 돌려보면 같은증상이 나타납니다.

이렇다면 문법오류는 아닌거 같아서요.

var infowindow = new daum.maps.InfoWindow({
content: ‘<div style=“width:150px;text-align:center;padding:6px 0;”>우리회사’
});

var infowindow = new daum.maps.InfoWindow({
content: '
<div style=“width:150px;text-align:center;padding:6px 0;”>우리회사’
});

이렇게 차이가 납니다. (우리회사 뒤에 div 닫는 태그가 이 에디터에는 안나타나네요)

content: ’ <- 여기서 밑에 태그들과 연결되지 않아서 오류가 납니다.

단순하게 div 태그만 들어가도 줄바뀜이 되면서 오류가 나네요.

<div id="map" style="width:100%;height:350px;"></div>
<script>
var mapContainer = document.getElementById('map'),
    mapOption = { 
        center: new daum.maps.LatLng(33.450701, 126.570667),
        level: 3
    };

var map = new daum.maps.Map(mapContainer, mapOption);
var infowindow = new daum.maps.InfoWindow({
    map: map,
    position : new daum.maps.LatLng(33.450701, 126.570667), 
    content : '<div style="width:150px;text-align:center;padding:6px 0;">우리회사</div>'
});
</script>

위 코드는 정상 동작 합니다.

image

chrome입니다.

이미
Invalid or unexpected token
이 에러가 난 시점에서 작성하신 코드의 문법을 의심해 보셔야 합니다.
위는 자바스크립트 파싱 오류이며
만약 말씀하신대로 API 내부에서 오류가 났다면 애초에 지도가 뜨지도 않았어야 정상입니다.
왜냐하면 자바스크립트 구문 자체가 잘못된거라 스크립트 해석 단계에서 오류나서 실행이 안되었을 것이기 때문이죠.

제 말은요…
저 샘플코드가 오류가 난다가 아니구요.

content : 다음에 태그가 들어가면 자동으로 줄바뀜이 되면서 오류가 난다는 얘기에요…

java 변수에 태그를 넣어서 부르든, 자바스크립트 변수에 태그를 넣어서 부르든간에
태그가 들어가는순간 줄바뀜이 되면서 인식을 못한다는 얘기였습니다.

저도 줄바뀜나는걸 수동으로 붙여서 한줄로 인식시키면 잘 나와요…
왜 줄바뀜이 생기는지 문의드린겁니다…

content: “
<div>
오류시
</div>”

content: “<div>정상작동시</div>”

해결했습니다

< 태그 열기전에 \\ 두개를 붙여줘야 하네요.

1개의 좋아요

해결하셨다니 다행입니다.