Integrating Bing Maps tiles into Google Maps API

Question

I currently managed to integrate OpenStreetMap into Google Maps API as it is described in this example. I wonder if I can also integrate Bing Maps tiles into Google Maps API. Is it possible? I could not find anything about that.

Note: I do know about mapstraction but for now, I would like to stick to Google Maps API.

Thanks in advance.

Answer 1

Based on the OpenStreetMap example that you cited, I would say that it's possible but it could be quite a challenge. I would strongly advise against it since the OSM example uses version 2 of the Google API and it now officially deprecated.

But if you want to give it a try I would adapt the OSM example to point to the Bing tiles and make sure that the tileUrlTemplate property matches Bing's format for storing tiles. Unfortunately, Bing uses a quad tree format while Google uses a coordinate based format for storing tiles and accessing them via a URL. It will be important to understand the differences if you're going to make the example work so be sure to dig into the documentation links above. Also, MapTiler has a fantastic visualization of the different tile formats out there. I've found this invaluable.

Personally, I would use OpenLayers. Since Bing and Google both use spherical mercator, adding multiple tile sources to a single map is a trivial exercise. Here is an example.

Answer 2

function TileToQuadKey ( x, y, zoom){ 
  var quad = "";
  for (var i = zoom; i > 0; i--) {
    var mask = 1 << (i - 1); 
    var cell = 0; 
    if ((x & mask) != 0) cell++; 
    if ((y & mask) != 0) cell += 2; 
    quad += cell; 
  }
  return quad; 
}

var bingMapType = new google.maps.ImageMapType({
  name: "Bing",
  getTileUrl: function(coord, zoom) {
    // this returns aerial photography
    return "http://ecn.t1.tiles.virtualearth.net/tiles/a" +
      TileToQuadKey(coord.x, coord.y,  zoom) + ".jpeg?g=1173&n=z";
      // i dont know what g=1173 means
  },
  tileSize: new google.maps.Size(256, 256),
  maxZoom: 21
});