Skip to Content

Using Google Maps with SAPUI5 GeoMap control

Many people seem to agree that it is possible to use Google maps as the source for a MapProvider for a GeoMap control. However, nobody seems to know what url or provider name to use. I have some code that uses HERE Maps, and it works just fine (see below). Does anyone know how to configure this to use Google Maps.

							<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>



			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=ZudDgWvkdmhKTRo9VFzE≈p_code=7VFWm85t9rRZQHcDFQiXrA"
						},
						{
						"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=ZudDgWvkdmhKTRo9VFzE≈p_code=7VFWm85t9rRZQHcDFQiXrA"
						}
					]
				}],
				"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");
 
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    Sep 30, 2017 at 11:39 AM
    var oMapConfig = {
    				"MapProvider": [{
    					"name": "GMAP",
    					"Source": [{
    						"id": "s1",
    						"url": "https://mt.google.com/vt/lyrs=s&x={X}&y={Y}&z={LOD}"
    					}]
    				}],
    				"MapLayerStacks": [{
    					"name": "DEFAULT",
    					"MapLayer": {
    						"name": "layer1",
    						"refMapProvider": "GMAP",
    						"opacity": "1",
    						"colBkgnd": "RGB(255,255,255)"
    					}
    				}]
    			};
    			oMap.setMapConfiguration(oMapConfig);
    			oMap.setRefMapLayerStack("DEFAULT");
    Add comment
    10|10000 characters needed characters exceeded