wave line

중국에서 구글맵 API 사용하기 – 문제 및 해결책

중국에서 구글지도 API가 작동하지 않는다는 것을 알고 계셨나요?
저희는 한 프로젝트에서 이 문제를 해결해야했습니다.
STUDIO-JT의 문제 해결 방법을 소개합니다.

문제

중국에선 구글지도 API가 정상적으로 이용이 불가능합니다.
하지만 걱정하실 필요 없습니다! 구글에선 이미 해당문제를 알고 있으며, 그에 대한 해결책을 제공하고 있습니다.

해결책

구글의 기본 API 도메인인 google.com을 google.cn으로 대체하면 중국에서도 구글맵을 이용할 수 있습니다. 이 도메인은 중국의 구글서버를 기반으로 하며, http통신을 이용하고있습니다.

예제 :
https://maps.google.com/maps/api/js?region=KR

해결책
http://maps.google.cn/maps/api/js?region=KR

구글 지도사용시 독도와 동해를 표시하려면 지역 매개변수를 KR로 설정하는 것을 잊지마세요!!!

데모페이지 확인

중국외의 국가에서 데모페이지를 방문할 경우 두개의 지도가 모두 정상적으로 표시되지만, 중국에서 데모페이지를 방문했을경우 오른쪽 지도만 표시됩니다. (원격으로 중국서버에서 페이지를 테스트하는 방법은 아래를 참조해주세요.)

코드 최적화

중국외부의 국가에서 중국서버의 구글맵을 요청할경우, 응답이 느려지기 때문에, 코드를 최적화하여 중국사용자만 google.cn을 사용하도록 하는것이 좋습니다.
maxmind geoip php api와 같은 PHP 라이브러리를 사용하여 사용자 IP에 따라 구글맵의 도메인을 개별로 제공할 수 있습니다.
만약 geoip 라이브러리를 사용할 수 없을 경우에는 사용자의 브라우저 언어를 확인하여 중문일때만 중국 구글지도 API를 제공하는 방법도 있습니다.
(HTML5의 geolocation API를 사용하는 방법도 있지만, 이는 사용자에게 접근권한을 요청하기 때문에 사용하지 않는것을 권장합니다.)

PHP 예제 :

$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);

if($lang === 'zh'){
    $google_map_url = 'http://maps.google.cn/maps/api/js?region=KR';
}else{
    $google_map_url = 'https://maps.google.com/maps/api/js?region=KR';
}
echo '<script src="'.$google_map_url.'"><script>';

Javascript 예제 :

Javascript를 사용할 경우 스크립트를 비동기방식으로 로드해야 합니다.
예제에서 사용하는 jQuery 정보 : $.getScript

var google_map_url = '';
var lang = navigator.language || navigator.userLanguage;

if(lang === 'zh'){
     google_map_url = 'http://maps.google.cn/maps/api/js?region=KR'; 
}else{
    google_map_url = 'https://maps.google.com/maps/api/js?region=KR';
} 

$.getScript( google_map_url ).done(function( script, textStatus ) {
    // 당신의 구글지도를 만들어보세요
}

구글맵 작동 테스트

마지막으로 구글맵이 정상적으로 연결이 되었는지 중국의 컴퓨터환경에서 확인해야합니다.
가장 간단한방법은 webpagetest.org와 같은 서비스를 이용하는 것입니다.
이 서비스는 중국서버에서 특정 웹사이트가 어떻게 보이는지 스크린 샷으로 제공합니다.

https://www.webpagetest.org로 들어가, 지역을 “Yangzhou, China (Chrome,Firefox)” 로 선택하고 테스트를 실행합니다.

테스트가 완료된 후 결과 페이지가 표시되면, “스크린 샷”을 클릭하여 중국에서 내 웹사이트가 어떻게 보이는지 확인할 수 있습니다. (대기중인 사람의 수에 따라 시간이 다소 걸릴 수 있습니다.)

중국 구글맵 연동 확인

참고 링크

Google offical FAQ : https://developers.google.com/maps/faq#china_ws_access

참고사항

데모 페이지 및 샘플코드에서는 Google API 키가 포함되어있지 않지만, 상용화시 생길 수 있는 문제를 방지하기 위해 반드시 Google API 키를 추가할 것을 권장합니다.

wave line

By 김민서

김민서
mask
mask
Loading superman superman