How to use Google Maps with SAPUI5 GeoMap control

Question

I have an SAPUI5 app that needs to plot spots on a GeoMap control. It works fine, so long as I use HEREMaps as the provider. However, the company would like me to use Google Maps. I can't find any information out there about how to set up the MapProvider for the GeoMap control to use Google Maps.

Here is (essentially) my GeoMap control:

                <vk:content>
                    <vk:ContainerContent title="Map" icon="sap-icon://choropleth-chart">
                        <vk:content>
                            <vbm:GeoMap id="GeoMap" width="100%" height="100%">
                                <vbm:vos>
                                    <vbm:Spots 
                                        click="onClickItem" 
                                        contextMenu="onContextMenuItem" 
                                        id="caseTimeMapSpots" 
                                        items="{path: '/CaseEvents/results'}" 
                                        posChangeable="true" 
                                        scaleChangeable="true"
                                        >
                                        <vbm:items>
                                        <vbm:Spot 
                                            id="Spot"
                                            position="{Longitude};{Latitude};0" 
                                            tooltip="{EventName} - {path: 'EventDatetime', formatter: '.formatDate'} {path: 'EventDatetime', formatter: '.formatTime'}" 
                                            type="Warning"
                                            click="onClickSpot" 
                                            contextMenu="onContextMenuSpot" 
                                            text="{EventName}"
                                            scale="{path: 'DeleteInd', formatter: '.formatScale'}"
                                        />
                                        </vbm:items>
                                    </vbm:Spots>
                                </vbm:vos>
                            </vbm:GeoMap>
                        </vk:content>
                    </vk:ContainerContent>
                </vk:content>

And here is where I set the MapProvider in my controller:

            var oGeoMap = this.getView().byId("GeoMap");
            var oMapConfig = {
                "MapProvider": [{
                    "name": "HEREMAPS",
                    "type": "",
                    "description": "",
                    "tileX": "256",
                    "tileY": "256",
                    "maxLOD": "20",
                    "copyright": "Tiles Courtesy of HERE Maps",
                    "Source": [
                        {
                        "id": "s1",
                        "url": "https://1.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        },
                        {
                        "id": "s2",
                        "url": "https://2.base.maps.cit.api.here.com/maptile/2.1/maptile/newest/normal.day/{LOD}/{X}/{Y}/256/png8?app_id=XXX"
                        }
                    ]
                }],
                "MapLayerStacks": [{
                    "name": "DEFAULT",
                    "MapLayer": {
                        "name": "layer1",
                        "refMapProvider": "HEREMAPS",
                        "opacity": "1.0",
                        "colBkgnd": "RGB(255,255,255)"
                    }
                }]
            };
            oGeoMap.setMapConfiguration(oMapConfig);
            oGeoMap.setRefMapLayerStack("DEFAULT");
            oGeoMap.setInitialZoom(13);
            oGeoMap.setInitialPosition("-97.57;35.57;0");

Has anyone done this using Google Maps? How is the MapProvider set up?

Thanks.

Answer 1

Update

So I am finaly able to wrap this up. There is an official way to access googles map tiles directly using the Tiles API. Following the guide in the link you could configure the MapConfig seen below with the URL from the Tiles API.

But this API is not available without a paid plan! (This plan runs about 10x as expensive then the JS API usage though) Due to this I will not follow up on this any further.

---

I am sorry this I still have not figured this out to the extend I'd like to. The following configuration is the most stripped down version that does the trick. The point here is that you need the url to directly get the map tiles. With X and Y specifying the tiles and {LOD} the level of detail. These parameters don't have to be replaced but will be set by the GeoMap control during run time.

The main reason I have not yet posted this is that - while it is working on a technical level - everything I have read so far indicates that accessing the tiles directly is against the ToS of Google Maps. So while it is working for fiddling around I would not use that in a production environment! Currently I am trying to find a way to clarify if there is something in the licensing to enable this use or if I am SOL.

Unfortunately the official API does not provide a way to request specific map tiles. Another way to figure this out would be to see if SAP can/does provide a different MapProvider implementation.

var oMapConfig = {
        "MapProvider": [{
            "name": "GMAP",
            "Source": [{
            "id": "s1",
            "url": "https://mt.google.com/vt/x={X}&y={Y}&z={LOD}"
            }]
        }],
        "MapLayerStacks": [{
                "name": "DEFAULT",
                "MapLayer": {
                        "name": "layer1",
                        "refMapProvider": "GMAP",
                        "opacity": "1",
                        "colBkgnd": "RGB(255,255,255)"
                }
        }]
    };