Customize ๐ŸŽจ

General Settings

The General settings tab contains settings such as responsiveness, dimensions, map type (satellite, terrain, etc), and fullscreen functionality. Start here to apply some basic customizations to your map.

  • Map Name - Arbitrary name, used only in the back-end.
  • Responsive - Enable this if you want the map to be responsive in the front-end. It will fit its parent element and resize accordingly.
  • Height - The height of the map in pixels.
  • Map Type - The different types of map that the Maps API provides - styled, roadmap, terrain, satellite and hybrid.
  • Gesture Handling - This is how the map will interpret gestures on mobile devices. For in-depth explanation, please check out the Maps API documentation.
  • Enable Fullscreen - This option will add a button on the map to toggle fullscreen mode.
  • Store Locator - Add a Store Locator UI functionality to the map.

Starting Location

The editor give you a couple of options for the initial location of the map. From the Location tab, at the top choose either Address or Custom.

  • Address - Simply enter an address and the map will automatically find the correct coordinates.
  • Custom - This option gives you the ability to position the map precisely. Drag and zoom the map to find the desired location, then click Get Current Location/Zoom. At this point the editor will remember the location and you can freely pan and zoom the map to edit it.

Style

The Google Maps API gives you complete control of how the map will look like. You can change the color or visibility of every feature that you see on the map. The downside of having complete control is that you might have to play around with the settings to achieve exactly what you need.

The concept is relatively simple - the major elements of the map such as roads and terrain are called features. Each feature is made up of a few elements. Each element can have different styles applied to it.

To summarize:

  • Different features of the map are organized into broad groups. For example the Landscape group contains Man Made, Natural and other features.

  • Each feature can have some of the following elements:

    • Geometry Fill
    • Geometry Stroke
    • Icon
    • Text
    • Text Fill
    • Text Stroke
  • Each element can have multiple styles:

    • Color Type - Default / Custom / Hue
    • Lightness
    • Saturation
    • Gamma
    • Inverted Lightness
    • Visibility - On / Off / Simplified
    • Weight

With the hierarchy explained, here is a quick example. If you want to make all roads blue, you would select Road, then All styles, set Color Type to Custom and finally select a color. An icon will appear next to the element that has styles applied to it and you can click it to revert to defaults. That's it!

Additionally, you can import a map style generated by another tool, or use a preset.

Each time you change a setting, the map will almost instantly update!