Demo: refactor GoogleMapsDemo class

[paodb]

GoogleMapsDemo class contains a lot of examples/code on how to use most of the add-ons features. File have become hard to follow so it would be better if each feature could have it's own demo on it's very own tab.

[paodb]

My idea for improving this demo is:

• Create an AbstractGoogleMapsDemo class that extends from VerticalLayout and it's in charge to validate api key, so all different demo views extend from it. Something like:

@StyleSheet("context://frontend/styles/google-maps/demo-styles.css")
public abstract class AbstractGoogleMapsDemo extends VerticalLayout {

  public AbstractGoogleMapsDemo() {    
    this.setSizeFull();
    String apiKey = System.getProperty("google.maps.api");
    if (apiKey == null) {
      add(
          new H2(
              "Api key is needded to run the demo, pass it using the following system property: '-Dgoogle.maps.api=<your-api-key>'"));
    } else {
      createGoogleMapsDemo(apiKey);
    }    
  }

  protected abstract void createGoogleMapsDemo(String apiKey);

}

• Split the current GoogleMapsDemo into 3 different demos:

  1 - BasicGoogleMapDemo: This will include de FlowingCode marker (not draggable), with the show coordinates & toggle info view buttons.

  2 - AddMarkersDemo: This will include adding markers with the selection of colors.

  3 - AddPolygonsDemo: This will include current add polygon example.

  Note: Draggable markers demo showing drag end coordinates will be another demo that I will be adding when I can complete #40 .

• Then, I will update the current GeolocationDemo to extend this new abstract class.

What do you think @javier-godoy, @mlopezFC ?

[javier-godoy]

I agree, It would be also a good time for using the annotation-based configuration feature of commons demo (https://github.com/FlowingCode/CommonsDemo/commit/d5ec76be3b737b44b75be47f7c7254d904c08884) which is available ein 3.1.0-SNAPSHOT