Google maps api doesn’t work in China – Problem and solution

Did you know that google map API do not work in china by default.
At Studio-JT we had to deal with this problem in a recent project.
Here is how we solved this issue.

THE PROBLEM

The reason is not clear but the fact is the domain maps.google.com we commonly use to display google maps is block within china, but don't worry google is aware about that and provide an alternative solution.

THE SOLUTION

The tricks is you have to replace the default API domain google.com to the google.cn , this domain use a google server base in china and it is not https.

So for example :
https://maps.google.com/maps/api/js?region=KR

will become
http://maps.google.cn/maps/api/js?region=KR

don’t forget the region parameter set to KR to display Dokdo name and East Sea the right way.

Check the demo page

if you visit the demo outside china the both maps will appear, but if you check the demo using a browser base in china only the right one will be display (see below how to test your page remotely)

IMPROVE THE CODE

Because the google map Chinese server will be slow outside the great wall, you maybe want to optimize your code so only users based in china will use google.cn.
So you can use PHP library like maxmind geoip php api and use the right server depending of the user IP.
If you can not use geoip library, an alternative solution will be to check the user browser language to display Chinese google map API for Chinese speaker only.
Forget use the html5 geolocation api since it requiered the user permission.

A PHP example :

$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>';

A Javascript example :

In Javascript you have to load the script asynchronously
Here a jQuery example using $.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 ) {
// Do your google map stuff
}

TEST IF IT WORKS

Finally to check if every work as except you need to connect to your site via a computer base in China. The simplest way is to use a service like webpagetest.org which will give you a screenshot of your page from a comptuer base in china:

Go to https://www.webpagetest.org , select "Yangzhou, China (Chrome,Firefox)"  and run a test

After the test finish you will get a result page, so click on "screenshot" and you will see what a user based in china see (Note that it can take some time depending how many people waiting on the queue)

Update : As Massimiliano notice in the comments  webpagetest.org do not provide chinese loaction anymore,  we found an alternative call geoscreenshot.com/country/china  with this service you can get a screenshot of your site from Hangzhou, China for free.

REFERENCE LINK

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

ADDITIONAL NOTE

In the demo and code example we intentionally omit to add the google api key, but in production it strongly recommend to add yours in order to avoid any problem

By 쇼베 니콜라