구글 지도 API 이용중 이슈 : grey screen

구글 지도 API를 사용하던 중, 로드 시 회색화면이 나오는 문제가 발생했다..

 

지도를 띄우는 방식은 onclick 시 레이어 팝업(퍼블, css로 반투명한 배경에 팝업띄우는 형태)으로 특정 div에 뿌려주는

방식을 사용하고 있었다..!

 

처음 띄울 때는 문제 없었지만, 두번째부터 회색화면이 노출(...)

 

    

 

AS-IS (맵호출부분)

// 좌표값에 맞는 위치
var markerPosition  = new google.maps.LatLng(lat, lng);
 
// 지도를 그릴 곳
var container = document.getElementById('map_canvas');
    var options = {
                    center: new google.maps.LatLng(lat, lng),
                    zoom: 17 // 숫자가 클수록 상세히 보임(0~18)
                  };
            
// 맵 생성
var map = new google.maps.Map(container, options);
            
// 현위치 마커 맵에 추가
var marker = new google.maps.Marker({
                map : map,
                position: markerPosition,
                clickable : false
             });

 

시도 1. google.maps.event.trigger(map, 'resize');

- 실패 : 구글 지도 API 레퍼런스 문서에 따르면 resize는 div의 크기가 변경될 때 해당 이벤트를 트리거하는 식으로 사용한다. 현재 div의 크기변화 없이 다른 좌표로 맵을 띄우고 있기 때문에 적용이 안되는 듯하다.

 

시도 2. 이벤트 할당(addListener 이용)

- center_changed, panTo, tilesloaded 이용
- 실패 : 모두 사용자가 지도를 조작할 때를 의미하는 것으로 초기에 맵을 띄우는 것이 문제

 

시도 3. style, id변경

- stackoverflow의 내용에 따라 div의 id를 map으로 변경, div의 style을 width 100%에서 px로 변경했지만 효과 없음

 

---

 

해결책 : 자바 스크립트 setInterval

   - setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용. clearInterval로 중지
   - setTimeout 함수 : 일정한 시간 후에 작업을 한번 실행. clearTimeout으로 중지. setInterval 과는 달리
                              지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행

즉,  setInterval은 일정한 시간간격으로 작업을 실행시키는 것이고, setTimeout은 작업 사이의 간격을 일정하게 하는것

setInterval을 통해 회색 화면의 맵을 다시 불러오는 것이다. 왜냐하면 async를 안붙여도 구글맵 자체가 비동기로 가져오는 듯한 느낌이라 파라미터로 넘어온 위도경도를 적용하기도 전에 맵이 그려진게 아닐까 의심..이 됐다. 그래서 원하는대로 실행이 되었을 때 clearInterval을 통해 null로 만들어 반복하지 않게 처리했다.

참고로 setInterval의 뒤에 숫자는 밀리세컨드, try~catch는 구글 지도 API가 IE 10 이하에서 지원하지 않는다고 하여 계속 interval이 실행되어 계속 오류를 던진다. 이를 방지 위해서 작성했다.

추가로 버튼 클릭 시 display 속성으로 팝업을 띄우고 거기에 지도를 뿌리는 것이기 때문에 기존 내역을 지워주지 않으면 다른 지도를 띄울때 0.5초정도 이전 지도 모습이 보인다. 이를 위해선 배경 레이어와 닫기버튼에 onclick으로 주거나 $(function)(){} 에 해당 팝업이 display:none일때 초기화 해주는 것이 필요하다! => $('#map_canvas').html('');

 

// 구글 api키셋팅
<script src="https://maps.google.com/maps/api/js?v=weekly&libraries=geometry&key=본인키"></script>
 
// 지도호출 시작
var map = "";
function mapInit(lat, lng) {
            
    if (interval != null) {
        try{
             // 좌표값에 맞는 위치
             var markerPosition  = new  google.maps.LatLng(lat, lng);
                        
             // 지도를 그릴 곳
             var container =  document.getElementById('map_canvas');
                        
             var options = {
                             center: new google.maps.LatLng(lat,  lng),
                             zoom: 17 // 숫자가 클수록 상세히  보임(0~18)
                            };
                        
            // 맵 생성
            var map = new google.maps.Map(container,  options);
                        
            // 현위치 마커 맵에 추가
            var marker = new google.maps.Marker({
                               map : map,
                               position: markerPosition,
                               clickable : false
                         });
                        
            clearInterval(interval);
                        
        }catch (e) {
             $("#map_canvas").text("이 브라우저는 구글 지도를 지원하지 않습니다.")
                 clearInterval(interval);
        }
    }
}
var interval = null;
      
function successCallback(paramString){
        var lat;
        var lng;
        var compareList = ["cafeTitle","latitude","longitude"];
            
        // paramString을 분리
        var paramArr = paramString.split('|');
 
        for(var i in paramArr){
            // 위도 경도 입력
            if (i==10) {
                lat = $.trim(paramArr[i].split('=')[1]);
            }else if (i==11) {
                lng = $.trim(paramArr[i].split('=')[1]);
            }else  if($.trim(paramArr[i].split('=')[0])==='cafeTitle'){
                $('#cafeTitle').text($.trim(paramArr[i].split('=')[1]));
            }
        }
        interval = setInterval(function(){
            mapInit(lat, lng);
        }, 0);
      }

 

참고 

https://offbyone.tistory.com/241
https://developers.google.com/maps/documentation/javascript/events
https://developers.google.com/maps/documentation/javascript/browsersupport