JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://openlayers.org/dev/theme/default/google.css">
<script src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=false&.js"></script>
<script src="http://openlayers.org/dev/OpenLayers.js"></script>
<div id="map"></div>
CSS
#map {
width: 375px;
height: 375px;
border: 1px solid gray;
}
div.olControlAttribution {
bottom: 0;
}
JavaScript
// web mercator overlays broken on dev
// with maxResolution set to 156543.0339
var map = new OpenLayers.Map({
div: "map",
projection: "EPSG:900913",
// does work (or just don't set maxResolution):
//maxResolution: 156543.03390625,
// does not work (pink tiles):
maxResolution: 156543.0339,
maxExtent: new OpenLayers.Bounds(
-20037508.34, -20037508.34,
20037508.34, 20037508.34
),
units: "m",
layers: [
new OpenLayers.Layer.Google("Google Streets"),
new OpenLayers.Layer.OSM(null, null, {isBaseLayer: false})
],
center: new OpenLayers.LonLat(-10720000,4900000),
zoom: 3
});
map.addControl(new OpenLayers.Control.LayerSwitcher());