Google maps not displaying until zoom in/out using openlayes2

Question

I am using openlayers 2 for map displaying using following code,

    map = new OpenLayers.Map("mapDiv");

    map.addLayer(new OpenLayers.Layer.Google("Google Streets",{numZoomLevels: 20}));

    map.addLayer(new OpenLayers.Layer.Bing({
                                                name: "Bing",
                                                key: "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf",
                                                type: "Road",
                                                wrapDateLine: true
                                                }));
    map.addControl(new OpenLayers.Control.LayerSwitcher());

What happen is google maps isn't displaying until someone zoom in/out while bing maps get displayed. I don't have google key for map api. so currently using following JS.

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript" ></script>

I think its problem of not having google key. is it so?

Answer 1

Check out this OpenLayers 2 Example. Google Layers should work fine without a key. The problem may be that your googleapi script

<script src="https://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript" ></script>

differs from that in the example shown below.

 <script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

You may also need to set the center of your map if you're not doing that elsewhere. Hope this helps and best of luck!