Develop Reference

Does a Google Maps coordinate map to the same location in Baidu Maps?

I'm implementing a map view in Baidu Maps (China's primary map service) using latitude & longitude originating from Google Maps. I am finding that my locations (primarily around Shanghai) are consistently 'off' by about a kilometer, though!
Doing a linear adjustment makes the Baidu locations appear in roughly (+- a few meters) the right spot:
//Declaring my Baidu map marker's properties
...
lat : gm_location.lat + 0.00575,
lng : gm_location.lng + 0.00668,
...
Although this will do for my particular needs, I dislike these magic numbers. Anyone have any insight where this offset is emerging from?

Which Google Maps do you use, google.com/map, or google.cn/map? Satellite or street view? In all cases, the answer is no - coordinates won't correspond to the Baidu Map POI, but for slightly different reasons.
First off, since Baidu doesn't offer any useful maps outside of China, let's focus on the question being,
Does a Google Maps coordinate within China, map to the same location in Baidu Maps?
The answer is no. Baidu Maps uses its own BD-09 coordinate system, while Google Maps uses either the Chinese GCJ-02 standard (for street maps on either google.com/maps or .cn), or WGS-84 for satellite imagery on google.com satellite view maps.
GPS coordinates (WGS-84) and Google Street Map coordinates (GCJ-02) do not map to the same location on Baidu Maps, as this snippet demonstrates (I didn't include the snippet in the answer because it doesn't work due to the way SO includes scripts - but you can see the code in this other answer I gave).
Using a linear correction around Shanghai might work, but the values will change for other regions in China.
How to compensate for the offset
The official method for converting Google coordinates to Baidu Map coordinates is to use the Baidu Map API for doing so.
There are two versions of the API:
An allegedly "server" version documented at http://developer.baidu.com/map/changeposition.htm that requires obtaining an application key
A version at http://api.map.baidu.com/ag/coord/convert that's used by the Baidu Map coordinates conversion demo via http://developer.baidu.com/map/jsdemo/demo/convertor.js and doesn't need an application key.
Let's take the Google Street Map (GCJ-02) coordinates of The People's Heroes Monument in Shanghai and convert them to Baidu Maps coordinates:
curl "http://api.map.baidu.com/ag/coord/convert?from=2&to=4&x=121.4914&y=31.2423"
will output
{"error":0,"x":"MTIxLjQ5Nzk5OTg3MzM4","y":"MzEuMjQ3OTc1ODQwMTk2"}
The coordinates are base64-encoded, and decode to
121.49799987338, 31.247975840196
If map.baidu.com allowed you to enter lat/lon coordinates, you'd land at the People's Heroes Monument.
Baidu's API only offers conversion to BD-09.
The conversion can also be run offline, and formulas can be found on Chinese blogs. Conversion between GCJ-02, WGS-84 and B-09 can be performed using libraries like geoChina or eviltransform.

Companies in China are required by law not to export map data without an offset to disguise foreign companies. See https://help.openstreetmap.org/questions/37560/map-offset-in-china for more details.
Coordinates you get from maps.google.com are probably wrong while those in baidu are probably correct.

Baidu map API does have a service to translate the Google Maps coordinates to Baidu map coordinates but I think it is only accurate for locations within China region. anywhere else is still off
Take a look at the official demo
http://developer.baidu.com/map/jsdemo.htm#a5_1
But beware there is a major delay before it returns your translated coordinate(s).
var x = 116.32715863448607;
var y = 39.990912172420714;
var ggPoint = new BMap.Point(x,y); // step 1 - create a Baidu map point from Google Maps coordinate
translateCallback = function (data){
if(data.status === 0) {
var marker = new BMap.Marker(data.points[0]); // step 3 - u get the offset coordinate here
bm.addOverlay(marker);
bm.setCenter(data.points[0]);
}
}
setTimeout(function(){
var convertor = new BMap.Convertor();
var pointArr = [];
pointArr.push(ggPoint);
convertor.translate(pointArr, 3, 5, translateCallback); // step 2 - pass the point as an array to the translate service
}, 1000);

My solution is
Replacing Lat and Long value in this link with current your coordinate (Google Lat and Long)
http://api.map.baidu.com/marker?location=39.916979519873,116.41004950566&output=html

How do I save Google maps v3 circle and rectangle overlays in database without error?

I used JSON method to save Google overlays in database. For example I save a circle in the database by this code:
var shape_properties;
shape_properties.center = array_shapes_object[counter].center;
shape_properties.redius = array_shapes_object[counter].radius;
shape_properties.type = array_shapes_object[counter].type;
shape_properties.zIndex = array_shapes_object[counter].zIndex;
shape_properties.fillColor = array_shapes_object[counter].get('fillColor');
shape_properties.name = array_shapes_object[counter].name;
array_shapes_string.push(JSON.stringify(shape_properties));
I have a variable named shape_properties and I save all circle properties inside of it and then change it to string by using JSON.stringify(shape_properties) and finally save this string to database.
And when I want to draw this circle on the map, I use something similar. I mean read these string contains circle properties from database and then change it to object by using JSON.parse(array_shapes_string[counter]) and finally draw it by using this code:
newShape = new google.maps.Circle({
center:new google.maps.LatLng(array_shapes_object[counter].center.d, array_shapes_object[counter].center.e),
radius:array_shapes_object[counter].redius,
zIndex:array_shapes_object[counter].zIndex,
fillColor:array_shapes_object[counter].fillColor,
fillOpacity: 0.15,
strokeColor: '#FF0000',
strokeWeight: 1
});
All are OK yet. But I have a big problem.
Look at this line:
center:new google.maps.LatLng(array_shapes_object[counter].center.d, array_shapes_object[counter].center.e),
This is the center of circle contains latitude and longitude and it is saved in database like this:
"center":{"k":32.9372338139709,"A":50.91888427734375}
And all properties are saved in database like this:
{"users":"user1,","center":{"k":32.9372338139709,"A":50.91888427734375},"redius":25644.7738046513,"type":"circle","zIndex":2,"fillColor":"#FF0000","name":"Circle"}
My problem is exactly this:
Sometimes center of circle is saved in database by k and A like:
"center":{"k":32.9372338139709,"A":50.91888427734375}
But sometimes else it will save with d and e instead of k and A like this:
"center":{"d":32.9372338139709,"e":50.91888427734375}
And when I read it to draw the circle it will show me an error. I'm sure this problem related to Google maps v3 and it seems they sometimes change the name of variables. How can I fix it?

You can't store these properties, the names of these properties(that represent google.maps-class-instances like LatLng or LatLngBounds) are not consistent.
You'll need your own format/methods to be able to store & restore these data(fetched via the methods provided by the API, e.g. lat() and lng() for a LatLng )
See How to save a Google maps overlay shape in the database? for a possible solution

Google Maps v3 API - Drawing Circles on Map

What I'm trying to do is draw a circle on google maps and retrieve the latitude/longitude/radius to store in a database, alternatively a geometry object would also be fine.
Using the standard code from https://developers.google.com/maps/documentation/javascript/examples/drawing-tools i created the map and drawing toolbox. What i can't seem to do is get the lat/long/radius from the map using javascript, surely this must be possible.
Any ideas?
Thanks
Note - my code is identical to the google example, i figured it was better to link to it rather than copying ~60+ lines of html into a post.
Thanks

Ref: https://developers.google.com/maps/documentation/javascript/drawing
google.maps.event.addListener(drawingManager, 'circlecomplete', function(circle) {
var radius = circle.getRadius(),
center = circle.getCenter();
});
Edit: getCenter()

Leaflet: panTo Web Mercator coordinates (EPSG 3857)

I have a standard leaflet map showing a tile layer. Now leaflet only lets you use panTo method using LatLng for example,
map.panTo(new L.LatLng(40.17, -98.12));
How will I use above panTo method if my coordinates are in EPSG:3857 for example (3679364.68,-9096106.74) ?
This is quite simple to to in Openlayers as once you define a map projection everything works in that projection. But Leaflet always works on latlng on the outside.
Any simple way to accomplish this using leaflet library?
Thanks!

Leaflet lets you use panTo method by unproject 3857 point. If you don't want to use proj4js library it also achieve in leaflet.
var point = new L.Point(3679364.68,-9096106.74); // Lon/Lat
var earthRadius = 6378137;
var latlng = L.Projection.SphericalMercator.unproject(point.divideBy(earthRadius));
map.panTo(new L.LatLng(latlng.lat, latlng.lng));

I can get it working if I use proj4js library to transform the coordinates by doing this:
var source = new Proj4js.Proj('EPSG:3857');
var dest = new Proj4js.Proj('EPSG:4326');
var p = new Proj4js.Point(-9096106.74,3679364.68); //this takes x,y
Proj4js.transform(source, dest, p);
this.map.setView(new L.LatLng(p.y, p.x),zoom);
But this is still not an ideal solution as it taxes me a Megabyte for for including the library. I am still looking for a leaflet solution. Knowing that internally leaflet already uses EPSG:3857 to fetch tiles, this shouldn't be this difficult.
Update
To do this purely in Leaflet, look at #ARsl's answer. Only reason I still accept this as my answer because, still feel uncomfortable doing the projection calculations like that (not that they are wrong), and just for that reason I don't accept this answer. Plus proj4js as added advantages of supporting many more datums.

I also haven't found any built-in method to convert EPSG:3857 coordinates to LatLng.
LeafLet crs class L.CRS.EPSG3857 has only project method which converts L.LatLng to L.Point in EPSG:3857 coordinates.
https://github.com/Leaflet/Leaflet/blob/master/src/geo/crs/CRS.EPSG3857.js
But it is quite easy to extend it with unproject method:
L.CRS.EPSG3857.unproject = function (point) { // Point -> LatLng
var earthRadius = 6378137;
projectionPoint = L.point(point).divideBy(earthRadius);
return this.projection.unproject(projectionPoint);
};
Then you can use it with panTo method:
map.panTo(map.options.crs.unproject([1372720.6476878107, 5690559.995203462]));
or:
map.panTo(L.CRS.EPSG3857.unproject([1372720.6476878107, 5690559.995203462]));

Using world Coordinates instead of latitude and longitude coordinates in google maps

I've to display some icons using google maps. I only have the world coordinates of this icons and I was wondering if there is a method in google maps API that I can use to put this icons.
Can you give me and example?
Thanks.

I found this:
var projection = new MercatorProjection();
var worldCoordinate = projection.fromLatLngToPoint(chicago);
Maybe there is a reverse way. Source: https://developers.google.com/maps/documentation/javascript/examples/map-coordinates