깃허브로 만든 홈페이지에 지도 api를 넣고 싶은데 아예 안뜹니다

지도/로컬 API
#1

지도/로컬 API에 대한 문의게시판입니다.

왕초보입니다…
깃허브로 https://happyhong28.github.io/test/ 라는 페이지를 만들고
도메일 등록도 https://happyhong28.github.io
http://happyhong28.github.io 둘다 했고
가이드 나와있는거대로 모두 해봤는데

홈페이지에 아무리해도 지도가 안뜹니다…ㅠㅠ
제가 깃허브로 올린 파일은 index.html




지도 좀 생성하자ㅏㅏㅏㅏㅏ

</head>
<body>

        <h1>왜 안뜰까?</h1>
    <!-- 지도를 표시할 div 입니다 -->
    <div id="map" style="width:100%;height:350px;"></div>

    <script type="text/javascript" src="http://dapi.kakao.com/v2/maps/sdk.js?appkey=363c3d345395e855a6b7ac10bdb4ef17"></script>
    <script>
    var mapContainer = document.getElementById('map'), // 지도를 표시할 div
        mapOption = {
            center: new kakao.maps.LatLng(33.450701, 126.570667), // 지도의 중심좌표
            level: 3 // 지도의 확대 레벨
        };

    // 지도를 표시할 div와  지도 옵션으로  지도를 생성합니다
    var map = new kakao.maps.Map(mapContainer, mapOption);
    </script>
    </body>
    </html>

입니다… 도와주세요… 뭐가 잘못된건가요?

#2

안뜨는 문제는 해결했는데 제가 맥북(사파리)로 페이지를 로딩하면 안보이는데
똑같이 페이지를 아이폰(사파리)로 로딩하면 지도가 잘보입니다…
맥북에서만 안보이는 이유가 뭔가요???

1개의 좋아요
#3

사파리만 안되는거였네요! 오페라로 로딩하니까 잘 보입니다…
이렇게 간단한걸…!
몇시간동안 삽질했지만 그래도 해결했습니다!!!

1개의 좋아요
#4

잘 해결하셨다니 다행입니다.
참고로 지나가다 한말씀 드리면, 혹시 개발자 도구는 활용하시지요?
사파리건, 오페라건, 크롬이던, (아이폰 사파리도 디버깅 가능)
개발자 도구가 좋으니 그걸 켜서 오류를 잡아보시는게 어떨가 합니다.

추가로 질문 올리실때도 위 코드와 함께, 개발자도구의 오류 스샷을 올려주시면 저희가 더 빨리 확인이 가능합니다.

감사합니다.

#5

헉 조언 감사합니다!! 그런 방법이 있었군요 ! 제가 너무 주먹구구식으로 했던 것 같습니다 ㅠㅠ

1개의 좋아요
#6

mac 사파리에서도 되어야 정상입니다.

만약 안 되는 현상이 지속된다면
페이지가 어떻게 보이는지, 그리고 에러 문구는 어떻게 표시되는지 알려주세요.