how to use Visual Business GeoMap with Googlemaps?

I want to add GeoMap Spot and Legend in Googlemaps

My.view.xml:

        <l:FixFlex>
            <l:flexContent>
                <vk:MapContainer autoAdjustHeight="true">
                    <vk:content>
                        <vk:ContainerContent titile="test">
                            <vk:content>

                                <vbm:AnalyticMap id="map"></vbm:AnalyticMap>

                            </vk:content>
                        </vk:ContainerContent>
                    </vk:content>
                </vk:MapContainer>
            </l:flexContent>
        </l:FixFlex>

My.controller.js

    var mapDom = this.getView().byId("map").getDomRef();
    onAferRendering: function() {
       jQuery.sap.includeScript(
         "https://maps.googleapis.com/maps/api/js?key=XXX",
         null,
         function() {
           ...
           mainmap =new google.maps.Map(mapDom, mapProp);
    }
}

This is working, Googlemap is added successfully.

But When I add Spot in AnalyticMap, googlemaps disappeared. Only AnalyticMap and Spots shows.

<l:FixFlex>
    <l:flexContent>
        <vk:MapContainer autoAdjustHeight="true">
            <vk:content>
                <vk:ContainerContent titile="test">
                    <vk:content>
                        <vbm:AnalyticMap id="map">
                            <vbm:vos>
                                <vbm:Spots items="{/Spots}" click="onClickItem" contextMenu="onContextMenuItem">
                                    <vbm:Spot position="{pos}" tooltip="{tooltip}" type="{type}" text="{text}" click="onClickSpot" contextMenu="onContextMenuSpot" />
                               </vbm:Spots>                                 
                            </vbm:vos>
                        </vbm:AnalyticMap>                      
                    </vk:content>
                </vk:ContainerContent>
            </vk:content>
        </vk:MapContainer>
    </l:flexContent>
</l:FixFlex>

I use demo in Explored

How to combine these two? Can I use both markers in googlemaps and spots in GeoMap?

I was thinking use markers only , but I can't write data on markers(only way is write lable for markers), And I also need Legend in GeoMap.

Solution

According to Map Provider Configuration Changes

To access the maps inside SAP a map provider has to fullfil these two requirements

A XYZ or quadkey interface has to be supported. This is the standard interface for map tiles.

The maps tiles can be retrieved by a REST web service. Providers include Bing, HERE (formerly Nokia), ALK, PTV and others. All have web sites enabling purchase of contracts.

GoogleMaps seems not one of the available map providers for GeoMap.

But if you just want to use GoogleMaps in UI5, GeoMap is not mandatory. Just add a map div in view:

<mvc:View xmlns:html="http://www.w3.org/1999/xhtml">
  <html:div id="map" style="height:100%"></html:div>

// Controller
onAfterRendering: function() {
  jQuery.sap.includeScript(
    "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY",
    "googlemap",
    function() {
      const mapDomId = this.getView().byId("map").getId(),
      mapDom = document.getElementById(mapDomId);
      
      this.mapConfig.initGoogleVariables();
      window.mainmap = new google.maps.Map(mapDom, this.mapConfig.mapProp); 
    }.bind(this),
    function() {
    }
  );
}