KBoard 세계지도 프랜차이즈 스킨에서 구글 api

KBoard 세계지도 프랜차이즈 스킨을 사용하고 있는데요.

여기 지도에 사용되는 구글 api가 익스플로어에서는 지원을 안한다고 하는데...

이 부분은 어떡해 해결해야 하나요?

그리고 상단에 나오는 지역 서울 경기..등과 같은 지역을 좀 더 세분화해서 서울의 구지역을 표현할 수는 없나요?

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
  • 안녕하세요~^^

    구글 지도 API에서 익스플로러는 현재 10, 11 버전만 지원하고 있는 듯합니다.

    익스플로러 10에 대한 지원은 2019년 11월에서 2020년 5월 사이에 종료된다고 합니다.

     

    아래 링크에서 확인 가능합니다.

    https://developers.google.com/maps/documentation/javascript/browsersupport?hl=ko

     

    API를 제공하는 쪽에서 지원하는 브라우저를 줄여나간다면

    워드프레스 플러그인 쪽에서는 해결이 어렵습니다.

     

    세계지도 프랜차이즈 스킨에서 지역을 세분화해서 표시하는 건

    저희도 연구해보고 개선하여 업데이트하도록 하겠습니다.

    고맙습니다.

  • 안녕하세요~~위의 방법도 해보고 도메인도 통일 시켰는데도 지도가 나오지 않습니다..

    구글 api도 확인을 하였는데 문제가 없는것 같ㅇ은데 왜 글러는지 도통 모르겠습니다.

    이전에는 잘 나오던 것이었는데요..ㅜㅜ

  • 구글 지도 문제는 API 키 발급 시 입력된 도메인 주소 문제일 수 있습니다.

    브라우저의 콘솔 창을 보면 RefererNotAllowedMapError 에러 메시지가 나오고 있기 때문입니다.

    API 키 발급 시 입력한 도메인 주소를 수정해보시겠어요?

     

    그리고 워드프레스 설정에서도 도메인을 모두 하나로 통일시켜주셔야겠습니다.

    sbfashioncenter.cafe24.com
    sbfashioncenter.or.kr

    여기저기 도메인이 다르다면 컴퓨터가 인식하기엔 서로 다른 사이트로 인식하기 때문입니다.

    우선 도메인일부터 모두 통일시켜주시는 게 좋겠습니다.

    해보시고 알려주시겠어요?

    고맙습니다.

  • 안녕하세요.

    사용 중이신 테마나 다른 플러그인 쪽에는 문제가 없는지요?

    구글 API키 등의 정보와 KBoard 확장설정 쪽에 입력한 정보가 일치하는지요?

    구글 API키 관련해서는 아래의 링크도 참고해보시겠어요?

    구글 지도 API 키 발급 받는 방법 (Maps JavaScript API)

    구글 지오코딩 API 키 발급 받는 방법 (Geocoding API)

     

    구글 쪽 설정에 신용카드 등 결제정보는 등록이 되어있는지요?

    만약, 등록되어 있지 않다면

    구글에 결제정보를 등록하신 후 다시 확인해보시겠어요?

     

    테마, 플러그인, 구글 API키, 구글 결제정보 쪽에도 문제가 없다면

    저희 고객지원 쪽 이메일로 워드프레스 관리자 계정과 FTP 접속 정보를 보내주시면 점검해드리겠습니다.

    고맙습니다.

  • 안녕하세요. 세계지도 프랜차이즈 스킨이 말씀하신대로 위의 방법을 다 해 보았는데...전혀 나오지를 않고 있습니다.

    구글 api도 확인했고 스킨까지 다시 삭제하고 새로 변경했는데도 나오지 않는 이유는 무었일까요..ㅜㅜ

    잘 나오고 있던 것인데..

    http://sbfashioncenter.cafe24.com/sb-find-manufacturer/

     

    여기인데...한번 봐 주시면 감사하겠습니다...

     

     

     

  • 올려주신 내용만으로는 원인을 파악하기 어렵습니다.

    코드 수정 후에 지도가 정상적으로 표시되지 않는 건지요?

    이전 코드로 되돌린 후에도 확인해보시겠어요?

     

    디버그 모드를 활성화해서 에러 메시지가 표시되는지도 확인해보세요.

    워드프레스 에러 확인하기 - 디버그 모드 활성화 방법

     

    사용 중이신 테마나 다른 플러그인 쪽의 문제는 아닌지 확인해보셔야 할 듯합니다.

    잠시 다른 테마로 바꿔서 확인해보시고

    다른 플러그인을 하나씩 비활성화해가면서 충돌이 있는지 점검해보셔야 할 듯합니다.

    고맙습니다.

  • 자꾸 질문드려 죄송합니다...

    어제가지 잘 나오던 구글 지도가 

    Uncaught SyntaxError: Unexpected end of input

    ?category1=eunpyeong…&pageid=1&uid=112:1 Uncaught (in promise)

    1. yd {message: "kboard_worldmap_franchise_init_map is not a function", name: "InvalidValueError", stack: "Error↵ at new yd (https://maps.googleapis.com/m…ard_worldmap_franchise_init_map&ver=5.4.2:140:124"}
      1. message: "kboard_worldmap_franchise_init_map is not a function"
      2. name: "InvalidValueError"
      3. stack: "Error↵ at new yd (https://maps.googleapis.com/maps/api/js?key=AIzaSyAHr5a0eryTKmfNEE6rD7NioJqy6CbxYNo&language=ko_KR&callback=kboard_worldmap_franchise_init_map&ver=5.4.2:63:227)↵ at Object._.zd (https://maps.googleapis.com/maps/api/js?key=AIzaSyAHr5a0eryTKmfNEE6rD7NioJqy6CbxYNo&language=ko_KR&callback=kboard_worldmap_franchise_init_map&ver=5.4.2:63:337)↵ at Yi (https://maps.googleapis.com/maps/api/js?key=AIzaSyAHr5a0eryTKmfNEE6rD7NioJqy6CbxYNo&language=ko_KR&callback=kboard_worldmap_franchise_init_map&ver=5.4.2:140:239)↵ at https://maps.googleapis.com/maps/api/js?key=AIzaSyAHr5a0eryTKmfNEE6rD7NioJqy6CbxYNo&language=ko_KR&callback=kboard_worldmap_franchise_init_map&ver=5.4.2:140:124"
      4. __proto__: Error

    안나오길래 콘솔로 확인해보니 위와 같은 에러가 뜹니다..왜그럴까요?ㅠㅠ

  • 넵~~그 부분을 수정한 것입니다만 똑같이 나오네요.

     

  • 어느 부분의 코드가 적용되지 않으시는지요?

    4번 내용의 코드는

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/google-maps.js 파일에서 수정해보시겠어요?

    고맙습니다.

  • 답변 감사드립니다~~그런데 위의 코드를 적용해 보아도 이전과 같이 출력되서 나오네요...ㅜㅜ

    다른 방법 좀 알려주시면 감사하겠습니다..

  • 1. 말씀하신 기본 이미지 사이즈는 어떤 것을 말씀하시는 건지요?

     

    2. 세계지도 프랜차이즈 스킨에서 지도 높이를 조절하시려면

    워드프레스 관리자 -> 외모 -> 사용자 정의하기 -> CSS 입력 필드에

    아래의 코드를 추가해보세요.

    /* 게시글 목록 페이지 */
    #kboard-worldmap-franchise-list #kboard-worldmap-franchise-canvas.active { height: 400px; }
    /* 게시글 본문 페이지 */
    #kboard-worldmap-franchise-document #kboard-worldmap-franchise-canvas.active { height: 400px; }

    위의 코드에서 400px 부분은 적절히 조절해보세요.

    기본은 500px로 설정되어 있습니다.

     

    3. 내용을 표로 구성하고 싶다는 말이 이해가 잘 가지 않습니다.

    KBoard 플러그인 에디터는 워드프레스 내장 에디터를 활용하고 있습니다.

    워드프레스 관리자 -> KBoard -> 게시판 목록 -> 게시판 선택 -> 기본설정 탭에서

    글 작성 에디터를 설정하실 수 있습니다.

    TinyMCE Advanced 플러그인은 워드프레스 에디터에 다양한 기능을 추가하는 플러그인입니다.

    https://ko.wordpress.org/plugins/tinymce-advanced/

     

    해당 플러그인을 설치하시면 본문 내용에 표를 삽입하실 수 있습니다.

     

    4. 세계지도 프랜차이즈 스킨 게시글 본문 페이지에서

    지도에 마커를 해당 게시글만 표시하고 싶으신 건지요?

    아래의 코드를 찾아서

    if(lat && lng){
    	jQuery.get(worldmap_franchise.request_uri, {action:'kboard_worldmap_franchise_get_gps_list', board_id:kboard_current.board_id, category1:current_category, category2: current_category2, lat:lat, lng:lng, south_east_lat:south_east_lat, south_east_lng:south_east_lng, security:worldmap_franchise.security}, function(results){
    		if(results){
    			var list = [];
    			var checker = [];
    			
    			for(var key in results){
    				if(!results.hasOwnProperty(key)) continue;
    				
    				var lat = parseFloat(results[key].lat);
    				var lng = parseFloat(results[key].lng);
    
    				if(lat && lng && checker.indexOf(lat + '' + lng) == -1){
    					list.push(results[key]);
    					checker.push(lat + '' + lng);
    				}
    			}
    			kboard_worldmap_franchise_add_marker(document_lat, document_lng, map, markers, list);
    		}
    	});
    }

    아래의 코드로 교체해서 확인해보시겠어요?

    if(document_lat && document_lng){
    	var marker = [];
    	marker[0] = {};
    	marker[0].lat = document_lat;
    	marker[0].lng = document_lng;
    	kboard_worldmap_franchise_add_marker(document_lat, document_lng, map, markers, marker);
    }
    else if(lat && lng){
    	jQuery.get(worldmap_franchise.request_uri, {action:'kboard_worldmap_franchise_get_gps_list', board_id:kboard_current.board_id, category1:current_category, category2: current_category2, lat:lat, lng:lng, south_east_lat:south_east_lat, south_east_lng:south_east_lng, security:worldmap_franchise.security}, function(results){
    		if(results){
    			var list = [];
    			var checker = [];
    			
    			for(var key in results){
    				if(!results.hasOwnProperty(key)) continue;
    				
    				var lat = parseFloat(results[key].lat);
    				var lng = parseFloat(results[key].lng);
    
    				if(lat && lng && checker.indexOf(lat + '' + lng) == -1){
    					list.push(results[key]);
    					checker.push(lat + '' + lng);
    				}
    			}
    			kboard_worldmap_franchise_add_marker(document_lat, document_lng, map, markers, list);
    		}
    	});
    }

    고맙습니다.

  • 질문이 많아서 죄송합니다..리스트를 클릭해서 상세 내용페이지로 갔을 경우 그 업체만 지도에 표시되게는 할 수 없나요?

  • 감사합니다..그리고 또 여쭤볼 것은 기본 이미지 사이즈 줄이는 방법과 지도부분의 세로크기를 줄이려고 하는데 어떡해 하나요?

    또한 내용을 표로 구성하고 싶은데 그건 어렵나요??

  • 안녕하세요.

    여전히 RefererNotAllowedMapError 에러 메시지가

    크롬 브라우저 개발자 도구(F12) Console 창에 표시되고 있습니다.

    RefererNotAllowedMapError 에러의 경우 허가된 페이지가 아닌 곳에서 구글 지도를 요청하면 발생되는 에러입니다.

     

    도메인 쪽에도 문제가 없으시다면,

    Google API 콘솔에서 API 제한사항 설정 중

    아래 API를 사용하게끔 설정하셨는지 확인해보시겠어요?

    Google Maps JavaScript API
    Google Maps Geocoding API

    기타 추가로 필요한 API는 사용하고 불필요한 API는 사용중지해주세요.

    https://imgur.com/a/MT1V3Pl

    고맙습니다.

워드프레스 에러 기술지원 서비스 전문가에게 맡기세요