cancel
Showing results for 
Search instead for 
Did you mean: 

Using Google Maps with SAPUI5 GeoMap control

0 Kudos

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&app_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&app_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");
 

Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos
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");
Jayakrishnan
Active Participant
0 Kudos

Hi,

Where i need to put the api key for google maps?

Former Member
0 Kudos

I don't think you need an API key. At least when I used it.

Best regards,

Thijs

Answers (1)

Answers (1)

Former Member
0 Kudos

Hi,
I want to add Google map street view in my project, Is it possible?