Using Google Maps and Baidu Maps in same app

Question

I\'m wondering if there are anyone out that have implemented Google Maps V2 and Baidu Maps in the same version; because GM doesn\'t work as intended in China?

Or sho

Answer 1

You can use both Google Maps and Baidu Maps side by side, but make sure to convert from the WGS-84 coordinates (used by most of the world) to Baidu's coordinates (BD-09, different from China's GCJ-02). Here's some code that does that, based on an example from the Baidu Maps API:

// Google coordinates
var gPoint = new BMap.Point(121.4914, 31.2423);  // lon, lat of the Bund Museum in Shanghai - https://www.google.com/maps/@31.2423,121.4914,19z
// gPoint = new BMap.Point(-122.0851053, 37.4219593);  // lon, lat of the Googleplex (no Baidu map data but zooms out in Mountain View)

var labelOffset = { offset: new BMap.Size(20, -10) };

// Initialize map
var map = new BMap.Map('allmap');
map.centerAndZoom(gPoint, 15);
map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT}));  // add scale
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.MapTypeControl());   // map type control: street/satellite/2.5D
map.enableScrollWheelZoom();  // mouse wheel scroll is disabled by default

// Add Google marker and label
var markerG = new BMap.Marker(gPoint);
map.addOverlay(markerG);
markerG.setLabel(new BMap.Label('Google coordinates marker appears<br/>at incorrect location on Baidu Map', labelOffset));

// Coordinate conversion ... GCJ-02 coordinates ... Baidu coordinates
BMap.Convertor.translate(gPoint, 2, function (point) {
  var marker = new BMap.Marker(point);
  map.addOverlay(marker);
  marker.setLabel(new BMap.Label('Converted to Baidu coordinates:<br/>' +
    point.lng + ', ' +
    point.lat +
    '<br/>(note the offset of ' + (map.getDistance(gPoint, point)).toFixed(2) + ' meters)',
  labelOffset));
  
  map.addOverlay(new BMap.Polyline([gPoint, point]));  // draw a line between points

});

<style type="text/css">
	body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=gd0GyxGUxSCoAbmdyQBhyhrZ"></script>
<script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>

<div id="allmap"></div>

If the snippet above doesn't work due to the way StackOverflow sandboxes scripts, try the JSbin demo of Google -> Baidu coordinates conversion instead.

If you must perform the conversion offline, check out the evil transform project on GitHub.

It's unclear though what coordinate types browsers localized in Chinese will return via the navigator.geolocation API. I've made a test app for that and posted the question at
Showing navigator.geolocation.getCurrentPosition in Baidu Maps.

Further reading:

• What causes the GPS shift in China?
• Restrictions on geographic data in China

Answer 2

Also, I have found that if you use http://ditu.google.cn while in China, it does work.

When using on-line maps in China for your application, whether it's Google Maps or Baidu, there is a transformation of latitude and longitude for legal reasons.

The satellite view in Google Maps uses "Earth" (WGS-84) coordinates. The map view of GMaps in China uses "Mars" coordinates (GCJ-02), and there is code to convert between the two. Baidu maps use the "Bearpaw" coordinates, with a different offset. The Baidu Map API has a demo converting between Google's coordinates and its own systems.

In China, GPS, like everything, has an extra layer of complication :)

If you have built this app, please post the details. Having an English interface to Baidu maps would be great.

Answer 3

If your server can access GM without issues (eg. your hosting is not in China mainland or it is but has uncensored connection), why don't you have server do loading data from GM and route it to user instead? We did that for few projects in the past, worked like a charm.

p.s. you could make php pull static map from GM for requested long/lat, store it into temp file on server, then pass back url to the temp file. From user's perspective they would be looking at (static) GM.

p.p.s. If you need user to be able to use GM's UI (do pan/zoom) then you'd need a bit more complex php that would alter all JS loaded from GM so all data would still be requested to your server which would then get maps - so basically to avoid any requests from client machine to be sent to GM server, but all to be sent to yours instead.

Answer 4

Try to use this way with Google coordinate

http://api.map.baidu.com/marker?location=39.916979519873,116.41004950566&output=html

Answer 5

PROBABLY a bit late to the party, but I accidentally stumbled across something recently which might help you.

I tried baidu maps and it was shockingly difficult to setup and terrible to use so I had a look around and suddenly, google maps worked for me without a vpn!

I realised that the old google china server was still active and if you try:

maps.google.cn

you'll find that creating an iframe using the google.cn address works!

Answer 6

My solution for this was to implement GM as usual, however if the user has China set (via settings) static maps is to be used, BUT the static map is fetched from Baidu instead of google.

staticUrl = "http://api.map.baidu.com/staticimage?center=" 
                + location.getLongitude() + "," + location.getLatitude() 
                + "&width=" + width + "&height=" + width + "&zoom=15"
                + "&markers=" + location.getLongitude() + "," + location.getLatitude();

Result of https://api.map.baidu.com/staticimage?center=121,31&width=300&height=300&zoom=15:

This method is NOT recommended if trying to implement a real map solution. Since I have different locations only used by different countries, this solution could be used.

So, that is how I solved it. Hope someone finds this helpful.