외부페이지에 카카오지도 API 사용하기
CMS/프레임워크 | XE 1.x |
---|---|
개발 언어 | PHP 7.0 |
문제 페이지 주소 | 비공개 (작성 후 5일 경과) |
외부페이지에 카카오맵을 넣으려고 합니다
카카오 API 에서 얻은 코드는 아래와 같고요.
맨 아랫줄 js 파일은 소스 그대로 넣어서 출력이 되지않는가 해서 코드처럼 js 파일을 별도로 만들고 불러왔습니다.
그런데 자바스크립트코드를 그대로 해도 출력이 되지않고, js 파일로 불러와도 경로설정이 잘못되었는지 지도가 나와야될 영역에 백지만 보이고 출력이 될 기미가 보이질 않네요.
<div id="map" style="width:900px;height:600px;border:1px solid #85B200"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ab75f76427cbff187f2d7992f46eccc6"></script>
<script type="text/javascript" src="/abc/map.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=ab75f76427cbff187f2d7992f46eccc6"></script>
<script type="text/javascript" src="/abc/map.js"></script>
map.js 파일은 아래의 여러방법으로 경로를 테스트 해 보았지만 모두 실패하였습니다
http://www..... map.js
/home/hosting_users/..map.js.
/abc/map.js...
../../../abc/map.js
map.js 파일은 아래와 같습니다
var mapContainer = document.getElementById('map'), // 지도를 표시할 div
mapOption = {
center: new kakao.maps.LatLng(37.440625, 128.665404), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(37.440625, 128.665404);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
mapOption = {
center: new kakao.maps.LatLng(37.440625, 128.665404), // 지도의 중심좌표
level: 3 // 지도의 확대 레벨
};
var map = new kakao.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(37.440625, 128.665404);
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
// 아래 코드는 지도 위의 마커를 제거하는 코드입니다
// marker.setMap(null);
댓글 2
페이지 소스를 보면 경로는 모두 정상인 것으로 보입니다.
다만, 카카오 쪽에서 인증키와 도메인이 일치하지 않는다며 로딩을 거부하고 있습니다.
도메인에 www를 붙이면 지도가 잘 나옵니다.
늘 고마운 기진곰님 ^^