The OpenStreet Map is the default tile provider for our map implementation. If you want to use Google map instead of OpenStreet, simply configure the map implementation. This is possible via mobile.xml

mobile.xml

<?xml version="1.0" encoding="UTF-8"?>
 
<mobile>
  ...
 
  <!-- general -->
  <parameters>
    <mapImpl>google</mapImpl>
  </parameters>
 
  <!-- react only --> 
  <react>  
    <parameters>
      <mapImpl>google</mapImpl>
    </parameters>
  </react>	  
 
</mobile>

It's also possible to set the map implementation via deployment descriptor (web.xml), e.g.

<init-param>
  <param-name>application.mapImpl</param-name>
  <param-value>google</param-value>
</init-param>

and finally it's also possible to set the parameter

web.component.map.google

to “true”. A parameter can be set via request stream, URL parameter or as application parameter in application.xml.

If you want to set the google API key, simply set the parameter:

web.component.map.google.key

… or in your source code, write:

  getFactory().setProperty("web.component.map.google.key", "apikey");

to set the apikey.

Usage is very similar to usage in vaadinUI.