<div dir="ltr">I'm stuck. My code works with OSM, but I need it to work with Google as well. The problem is simply that Google v3 and my other layers are not playing well together at all. They don't zoom together. <div>
<br></div><div style>In the case of Google satellite, the layer doesn't zoom at all unless I pan the map. In the case of the others (hybrid, terrain, roads), they zoom, but the google layer and the other layers on the map zoom up to half a second apart from each other, and the layer "drifts" between zoom levels somewhat. </div>
<div style><br></div><div style>The code that reproduces this is simple and derived directly from the WMS and Google v3 examples, but they appear not to work together well:</div><div style><br></div><div style><table><tbody><tr>
<td class="">$(function() {</td></tr><tr><td class=""></td><td class=""> var in_options = {</td></tr><tr><td class=""></td><td class=""> internalProjection: new OpenLayers.Projection('EPSG:900913'),</td>
</tr><tr><td class=""></td><td class=""> externalProjection: new OpenLayers.Projection("EPSG:4326")</td></tr><tr><td class=""></td><td class=""> };</td></tr><tr><td class=""></td><td class="">
<br></td></tr><tr><td class=""></td><td class=""> var wkt = new OpenLayers.Format.WKT(in_options);</td></tr><tr><td class=""></td><td class=""> var feature = wkt.read("POLYGON ((-78.9950752916525687 35.5198238058974169, -78.9950752916525687 36.0750238562958074, -78.2565296570171398 36.0750238562958074, -78.2565296570171398 35.5198238058974169, -78.9950752916525687 35.5198238058974169))");</td>
</tr><tr><td class=""></td><td class=""> var bounds = feature.geometry.getBounds();</td></tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> var wms = new OpenLayers.Layer.WMS('Zoning', "/ga_resources/wms/", {</td>
</tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> </td></tr><tr><td class=""></td><td class=""> styles: "styles/new-style",</td></tr><tr><td class="">
</td><td class=""> </td></tr><tr><td class=""></td><td class=""> layers: "catalog/states/nc/counties/wake/zoning",</td></tr><tr><td class=""></td><td class=""> transparent: true</td>
</tr><tr><td class=""></td><td class=""> });</td></tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> var map = new OpenLayers.Map({ div:'map', projection: new OpenLayers.Projection("EPSG:900913")});</td>
</tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> var layers = [</td></tr><tr><td class=""></td><td class=""> new OpenLayers.Layer.Google(</td></tr><tr><td class="">
</td><td class=""> "Google Physical",</td></tr><tr><td class=""></td><td class=""> {type: google.maps.MapTypeId.TERRAIN}</td></tr><tr><td class=""></td><td class="">
),</td></tr><tr><td class=""></td><td class=""> new OpenLayers.Layer.Google(</td></tr><tr><td class=""></td><td class=""> "Google Streets", // the default</td>
</tr><tr><td class=""></td><td class=""> {numZoomLevels: 20}</td></tr><tr><td class=""></td><td class=""> ),</td></tr><tr><td class=""></td><td class=""> new OpenLayers.Layer.Google(</td>
</tr><tr><td class=""></td><td class=""> "Google Hybrid",</td></tr><tr><td class=""></td><td class=""> {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}</td></tr>
<tr><td class=""></td><td class=""> ),</td></tr><tr><td class=""></td><td class=""> new OpenLayers.Layer.Google(</td></tr><tr><td class=""></td><td class=""> "Google Satellite",</td>
</tr><tr><td class=""></td><td class=""> {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}</td></tr><tr><td class=""></td><td class=""> ),</td></tr><tr><td class=""></td><td class="">
wms</td></tr><tr><td class=""></td><td class=""> ];</td></tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> map.addLayers(layers);</td></tr><tr>
<td class="">
</td><td class=""></td></tr><tr><td class=""></td><td class=""> //map.addLayers([wms]);</td></tr><tr><td class=""></td><td class=""> map.addControl(new OpenLayers.Control.LayerSwitcher());</td></tr>
<tr>
<td class=""></td><td class=""> map.zoomToExtent(bounds);</td></tr><tr><td class=""></td><td class=""><br></td></tr><tr><td class=""></td><td class=""> });</td></tr></tbody></table></div></div>