GWT GoogleMaps Hide Default Layers Using Styles

Question

I'm using GWT and the GWT GoogleMaps API (v3.8.0). I have everything up and running perfectly.

However, I'd like to disable a few of the default features that come with GoogleMaps, such as street names, the ability to click on restaurants, etc. Basically I'd like a very barebones map layer that I add my own custom layers to.

I thought I could do this using Styles. I'm trying to use a MapTypeStyler with visibility off with a MapTypeStyle of whatever type I wanted to disable (in this test case, MapTypeStyle.ROAD).

Here is the test code I'm trying to get running:

package com.test.client;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.JsArray;
import com.google.gwt.dom.client.Document;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;
import com.google.maps.gwt.client.MapTypeStyle;
import com.google.maps.gwt.client.MapTypeStyleElementType;
import com.google.maps.gwt.client.MapTypeStyleFeatureType;
import com.google.maps.gwt.client.MapTypeStyler;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);
    }

    public void createMap() {



        JsArray<MapTypeStyle> styles = (JsArray<MapTypeStyle>) JsArray.<MapTypeStyle>createArray();

        JsArray<MapTypeStyler> roadStylers = (JsArray<MapTypeStyler>) JsArray.<MapTypeStyler>createArray();
        MapTypeStyler roadStyler = MapTypeStyler.visibility("off");
        roadStylers.push(roadStyler);

        MapTypeStyle roadStyle = MapTypeStyle.create();
        roadStyle.setStylers(roadStylers);
        roadStyle.setFeatureType(MapTypeStyleFeatureType.ROAD); //this is line 43
        roadStyle.setElementType(MapTypeStyleElementType.ALL);

        styles.push(roadStyle);

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);
        mapOpts.setStyles(styles);

        final GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);


    }
}

However, when I run that, I get an Exception:

14:49:52.756 [ERROR] [gwttest] Uncaught exception escaped

java.lang.ExceptionInInitializerError: null
    at com.test.client.GwtTest.createMap(GwtTest.java:43)
    at com.test.client.GwtTest$1.run(GwtTest.java:25)
    at com.google.gwt.ajaxloader.client.ExceptionHelper.runProtected(ExceptionHelper.java:36)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:293)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:547)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364)
    at java.lang.Thread.run(Thread.java:745)
Caused by: java.lang.NullPointerException: null
    at com.google.maps.gwt.client.MapTypeStyleFeatureType$.register(MapTypeStyleFeatureType.java:227)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessagesWhileWaitingForReturn(BrowserChannelServer.java:338)
    at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:219)
    at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:576)
    at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:284)
    at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
    at com.google.maps.gwt.client.MapTypeStyleFeatureType$.create(MapTypeStyleFeatureType.java)
    at com.google.maps.gwt.client.MapTypeStyleFeatureType$.<clinit>(MapTypeStyleFeatureType.java:39)
    at com.test.client.GwtTest.createMap(GwtTest.java:43)
    at com.test.client.GwtTest$1.run(GwtTest.java:25)
    at com.google.gwt.ajaxloader.client.ExceptionHelper.runProtected(ExceptionHelper.java:36)
    at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
    at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
    at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
    at java.lang.reflect.Method.invoke(Method.java:483)
    at com.google.gwt.dev.shell.MethodAdaptor.invoke(MethodAdaptor.java:103)
    at com.google.gwt.dev.shell.MethodDispatch.invoke(MethodDispatch.java:71)
    at com.google.gwt.dev.shell.OophmSessionHandler.invoke(OophmSessionHandler.java:172)
    at com.google.gwt.dev.shell.BrowserChannelServer.reactToMessages(BrowserChannelServer.java:293)
    at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:547)
    at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:364)
    at java.lang.Thread.run(Thread.java:745)

The weird thing is, the Exception seems to be internal to GoogleMaps, so I don't really know what's going on?

Am I doing something obviously dumb with the Styles?

Edit: I've also asked this question on the GWT Forum.

Answer 1

I found one workaround involving writing native JavaScript that bypasses the GoogleMaps GWT API:

package com.test.client;

import com.google.gwt.ajaxloader.client.AjaxLoader;
import com.google.gwt.ajaxloader.client.AjaxLoader.AjaxLoaderOptions;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.Document;
import com.google.maps.gwt.client.GoogleMap;
import com.google.maps.gwt.client.LatLng;
import com.google.maps.gwt.client.MapOptions;
import com.google.maps.gwt.client.MapTypeId;

public class GwtTest implements EntryPoint {

    @Override
    public void onModuleLoad() {
        AjaxLoaderOptions options = AjaxLoaderOptions.newInstance();
        options.setOtherParms("sensor=false");
        Runnable callback = new Runnable() {
            public void run() {
                createMap();
            }
        };
        AjaxLoader.loadApi("maps", "3", callback, options);
    }

    public void createMap() {

        MapOptions mapOpts = MapOptions.create();
        mapOpts.setZoom(4);
        mapOpts.setCenter(LatLng.create(37.09024, -95.712891));
        mapOpts.setMapTypeId(MapTypeId.TERRAIN);
        mapOpts.setStreetViewControl(false);

        GoogleMap map = GoogleMap.create(Document.get().getElementById("map_canvas"), mapOpts);

        styleMap(map);
    }


    public native void styleMap(GoogleMap map) /*-{
        map.set('styles', [
          {
            "featureType": "road",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "featureType": "poi",
            "stylers": [
              { "visibility": "off" }
            ]
          },{
            "stylers": [
              { "invert_lightness": true }
            ]
          }
        ]);
    }-*/;
}

I'd still be curious to find out if there's a pure Java workaround, but if anybody else has this problem, this native approach works. And it has the added bonus that it works directly with JSON you can export from the GoogleMaps Styling Wizard.