inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

코로나맵 개발자와 함께하는 지도서비스 만들기 1

infowindow 만들고 클릭 이벤트 추가하기

화면에 지도가 뜨지 않는 이유를 모르겠습니다!

218

billaa

작성한 질문수 4

1

6분 10초까지 따라했는데 

새로 고침을 했지만 아예 지도가 표시가 되지 않습니다.

완전 똑같이 따라썼는데 문제가 무엇인지 모르겠습니다!

저번시간까지는 됐습니다

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>my first map</title>
    <link rel="stylesheet" href="/stylesheets/style.css"/>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=zethc2gz24"></script>
</head>
<body>
  <div id="navbar">myfirstmap</div>
  <div id="infoBox">
    <div id="infoTitle">현재 날짜</div>
    <div id="infoContent">2020.01.01 </div>
  </div>
<div id="map" style="width:100%;height:100vh;"></div>
<!-- 외부 데이터 파일을 가져옴 -->
<script type ="text/javascript" src="/data/data.js"></script>
<script>
  var mapOptions = {
      center: new naver.maps.LatLng(37.3595704, 127.105399),
      zoom: 10,
  };

  var map = new naver.maps.Map("map", mapOptions);
  //마커

  var markerList =[];
  var infowindowList =[];

  for (var i in data){
    var target = data[i];
    var latlng = new naver.maps.LatLng(target.lat , target.lng);
    marker = new naver.maps.Marker({
      map : map,
      position: latlng,
      icon : {
        content: "<div class ='marker'></div>",
        anchor: new naver.maps.Point(12,12) //마커의 중심 설정 
       },
    });
   
    //string 값으로 나온다. `` 백틱
    var content = `<div class='infowindow_wrap'>
      <div class='infowindow_title'>${target.title}</div>
      <div class='infowindow_content'>${target.content}</div>
      <div class='infowindow_date'>${target.date}</div>
    </div>`

    var infowindow = new naver.maps.InfoWindow({
      content = content,
      backgroundColor: "#00ff0000",
      borderColor: "#00ff0000",
      anchorSize : new naver.maps.Size(0,0)
      //말풍선 형태로 하는 건데 말풍선안나오게 하는 것
    })

    
    markerList.push(marker);
    infowindowList.push(infowindow);

  }

  for(var i=0, ii=markerList.length; i<ii; i++){
    naver.maps.Event.addListener(markerList[i],"click", getClickHandler(i));
  }

  function getClickHandler(i){
    return function(){
      var marker = markerList[i];
      var infowindow = infowindowList[i];
      //infowindow가 지금 지도에 표시 되어있는지 
      if(infowindow.getMap()){
        infowindow.close();
      }
      else{
        infowindow.open(map.marker)
      }
    }
  }
 
</script>
</body>
</html>

express nodejs vscode 웹앱

답변 1

0

이동훈

넵 질문 감사합니다:)

브라우저에서 f12누르신 다음에 에러뜨는걸 캡쳐해서 보내주실 수 있나요??

감사합니다~!!

map API

0

34

1

nodejs 터미널 인식

0

36

1

kakao is not defined 오류

0

414

1

nodemon ./bin/www 입력 시 오류

0

165

1

호스팅 및 도메인 관련

0

159

1

마커이미지가 깨집니다

0

144

2

nodemon설치와 express-generator 오류

0

221

1

코드를 다운받을수 있나요?

0

202

1

SUDO를 계속 입력하지 않는 방법을 알 수 있을까요?

0

597

1

var로 선언하는 이유

0

368

1

Places 코드가 안돼요.

0

349

0

애니메이션 관련 질문

0

271

1

(index):121 Uncaught ReferenceError: kakao is not defined at (index):121:10

0

617

0

히트맵 구성

0

243

0

이벤트리스너 추가부분 질문..

0

298

2

for문 돌릴때 ii 에 대해서 궁금합니다.

1

388

1

express 설정

0

253

0

이름공간 문법?

0

271

0

마커가 안뜹니다

1

318

2

nodemon 설치 에러

0

413

1

AI NAVER API 관련 질문

1

373

2

궁금한게 있어요 link로 연결할때 href에 public 경로를 빼야만 적용되는 이유는 뭔가요??

1

225

0

node와 ncm 의 버전 확인이 안됩니다ㅠㅠ

0

422

1

저장후엔 localhost가 열리지 않네요ㅠ

0

298

0