How to use Google Map API in SAPUI5 Applciation?

[Jayakrishnan]

Hi All,

I am working on Custom SAPUI5 Application Development. In my application i need to show the areas in Geo-Map.I used Google API inside the Geo Map as a Visual Business Map Provider. But when i run the application it is not giving the same map layout as Google Maps. Please see the below images for your info.

1. Map Display on my Application:

2. Original Google Map View:

When i search for something on google map it displays with nearby area information too. i want to replicate same kind of view in my application.

This is my code.

	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)"
					}
				}]
			};
			oGeoMap.setMapConfiguration(oMapConfig);
			oGeoMap.setRefMapLayerStack("DEFAULT");

Is it because of any license issue?

Please help me on this .

Thank you,

Regards,

JK.

[Jayakrishnan · Accepted solution]

Hey All,

I found the solution for this. It just a URL change.

New Code:

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

Thnak you.

[jorge_cabanas]

Hi,

I guess you would need to use a source url like:

https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&avoid=TOLLS&libraries=places&callback=initM...

Where you will need an API KEY. As far as I know, official google maps require it.
The callback initMap would be your method/function which trigger the map initialization

Kind regards,
Jorge

[Jayakrishnan]

Hi Jorge,

Thank you for your reply. can we get a trial API Key without purchase?

[jorge_cabanas]

I don't think so but I'm not an expert 🙂

[Jayakrishnan]

Hey Jorge,

I got an API key now, but now it shows no VBM is configured error. Please see the below images for more info.

var oGeoMap = this.getView().byId(
                                                                                            					"GeoMap");


                                                                                            				var oMapConfig = {
                                                                                            					"MapProvider": [{
                                                                                            						"name": "GMAP",
                                                                                            						"Source": [{
                                                                                            							"id": "s1",
                                                                                            							"url": "https://maps.googleapis.com/maps/api/js?key=MY_OWN_KEY&avoid=TOLLS&libraries=places&callback=initMap"
                                                                                            						}]
                                                                                            					}],
                                                                                            					"MapLayerStacks": [{
                                                                                            						"name": "DEFAULT",
                                                                                            						"MapLayer": {
                                                                                            							"name": "layer1",
                                                                                            							"refMapProvider": "GMAP",
                                                                                            							"opacity": "1",
                                                                                            							"colBkgnd": "RGB(255,255,255)"
                                                                                            						}
                                                                                            					}]
                                                                                            				};
                                                                                            				oGeoMap.setMapConfiguration(oMapConfig);
                                                                                            				oGeoMap.setRefMapLayerStack("DEFAULT");
                            

[jorge_cabanas]

Hi,

I don't see any image

[Jayakrishnan]

Hi , Please see the image

[jorge_cabanas]

I can't help much more...

Go to the link shown in the image..

Read about it, play with the code:

Link 1

Link 2

Link 3

[Jayakrishnan]

Thank you for your help