CODEWITHSUNDEEP
javascriptgoogle-mapsmapsopenlayers
Hitesh Vaghani
Hitesh Vaghani

Reputation: 1362

Adding Google map layer in Openlayer. What is the requirement?

I am using google map layer with my application since year and suddenly it stopped working. Do we required Key for using google map API.? My code is as following.

map = new OpenLayers.Map('mapDiv');
map.addControl(new OpenLayers.Control.LayerSwitcher());

var gphy = new OpenLayers.Layer.Google(
    "Google Physical",
    {type: google.maps.MapTypeId.TERRAIN}
);
var gmap = new OpenLayers.Layer.Google(
    "Google Streets", // the default
    {numZoomLevels: 20}
);
var ghyb = new OpenLayers.Layer.Google(
    "Google Hybrid",
    {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
);
var gsat = new OpenLayers.Layer.Google(
    "Google Satellite",
    {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
);

map.addLayers([gphy, gmap, ghyb, gsat]);

// Google.v3 uses EPSG:900913 as projection, so we have to
// transform our coordinates
map.setCenter(new OpenLayers.LonLat(10.2, 48.9).transform(
    new OpenLayers.Projection("EPSG:4326"),
    map.getProjectionObject()
), 5);

I had inserted all the script library necessary. If once i select Google Satellite and then try for Google Streets or other option than Maps do load on application.

Upvotes: 4

Views: 3382

Answers (1)

Staale
Staale

Reputation: 27988

Google releases new versions of their API continously, deprecating the older versions. From version v3.21, OpenLayers 2.13.1 no longer works. If you request an earlier version than 3.21 from Google, you will still get the latest version from Google.

I cherry-picker the patch mentioned above into our own fork of openlayers: https://github.com/UMS/openlayers/tree/release-2.13.1_ums

This is the 2.13.1 tag with the above change, and a dist directory.

We use bower, and the following bower config works for us:

{
    "dependencies": {
        "openlayers": "git://github.com/ums/openlayers.git#release-2.13.1_ums"
    },
    "overrides": {
        "openlayers": {
            "main": [
                "dist/OpenLayers.js",
                "theme/default/style.css",
                "theme/default/img/"
            ]
        }
    }
}

The fix is discussed here: https://github.com/openlayers/openlayers/issues/1450 - which also has a link to the fix that I cherry-picked from: https://github.com/v5analytics/openlayers/commit/5c6a7f4540b7d70261e9483d3a3770cfbfc72001

Related issue in the Google Maps Javascript API issue tracker: Issue 8092: Bug: Map tiles not showing on page load with OpenLayers

Upvotes: 4

Related Questions