How does Pokèmon Go uses custom Google map using Google Map API?

Question

I am not able to find anywhere on Google API document that its map can be customized (i know it can be customized on web only) but can see on the Pokèmon Go app that it uses Google API to show custom map.

Reference for Pokèmon Go uses google map: https://www.reddit.com/r/pokemongo/comments/4s71t1/suggestion_download_city_map_as_a_way_to_decrease/

Anyone able to figure out this approach?

Custom map i means the map below with green color and blue sky:

Answer 1

I don't know how Pokémon GO does it, but you can get a really nice looking effect with some layout tricks. I'm using a sky image and I'm covering the sky image and the map with a gradient view (to simulate the horizon) and the map with a semitransparent green view.

activity_maps.xml

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical">      <RelativeLayout         android:layout_width="match_parent"         android:layout_height="170dp">          <ImageView             android:layout_width="match_parent"             android:layout_height="match_parent"             android:scaleType="centerCrop"             android:src="@drawable/sky"/>          <View             android:layout_width="match_parent"             android:layout_height="20dp"             android:layout_alignParentBottom="true"             android:background="@drawable/gradientsky"/>     </RelativeLayout>      <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent">          <fragment             android:id="@+id/map"             android:name="com.google.android.gms.maps.SupportMapFragment"             android:layout_width="match_parent"             android:layout_height="match_parent"             tools:context="mypackage.MapsActivity"/>          <View             android:layout_width="match_parent"             android:layout_height="match_parent"             android:background="#2200ff00"/>          <View             android:layout_width="match_parent"             android:layout_height="20dp"             android:background="@drawable/gradientmap"/>      </RelativeLayout>  </LinearLayout> 

gradientsky.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="rectangle">     <gradient         android:angle="90"         android:startColor="#ffffff"         android:endColor="#00ffffff" /> </shape> 

gradientmap.xml

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"        android:shape="rectangle">     <gradient         android:angle="270"         android:startColor="#ffffff"         android:endColor="#00ffffff" /> </shape> 

MapsActivity.java (trivial, but I'm adding it so the example is complete)

public class MapsActivity extends FragmentActivity implements OnMapReadyCallback {     @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);          setContentView(R.layout.activity_maps);         SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()                 .findFragmentById(R.id.map);         mapFragment.getMapAsync(this);     }      @Override     public void onMapReady(GoogleMap map) {         map.getUiSettings().setCompassEnabled(false);         map.setMapType(GoogleMap.MAP_TYPE_NORMAL);         CameraPosition cameraPosition = new CameraPosition.Builder()                 .target(new LatLng(39.87266,-4.028275))                 .zoom(18)                 .tilt(67.5f)                 .bearing(314)                 .build();         map.moveCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));     } } 

The result looks like this:

Another approach could be using a TileOverlay to show a custom map. You can find more info about Tile Overlays here.

To improve the example, you may want to add some parallax effect to the sky so it moves when the map rotates.

Answer 2

Wikipedia arcticle to the creator of Pokèmon Go:

Niantic, Inc. is a software development company best known for developing the augmented reality mobile games Ingress and Pokémon Go. It was formed by Keyhole, Inc. founder John Hanke in 2010 as Niantic Labs, an internal startup at Google.

As you can see, Niantic was an internal startup at Google. Although both companies went their separate way, Google still invests in Niantic. So I think that Niantic has some possibilities, that aren't available for us. As you said, I neither found a way in the Google Maps docs for Android.

I'm not exactly sure if this is true, it's just a guess.