EverWeb's Map Fill Option for Shapes

Video Transcript:

► This Video's Contents...

0:00 - Introducing Map Fill

0:50 - Adding Map Fill To a Page

1:38 - Using Google Maps API Key

2:12 - Generating a Google Maps API Key

4:02 - Adding the Google Maps API Key to Map Fill

4:16 - Map Fill Levels and Features

To use the features shown in this video you will need EverWeb 4.2 or higher, for macOS or Microsoft Windows.

In this video, we are going to set up and explore EverWeb’s Shape Options, Map Fill feature.

Map Fill lets you add a variety of features and functionality to your website’s Google Maps. There are three levels of mapping features, which we will explore later on.

Use Map Fill to embed interactive maps into your website, or you can use a map as a background e.g. in the Responsive Row widget.

To use Map Fill add an object to your page, or select an existing object e.g. a TextBox or widget.

In this example I am going to add a rectangle shape to my page and use it as my Map Fill object. Next, go to the Shape Options tab.

Click in the dropdown menu in the Fill section, then choose Map Fill.

Map Fill has three levels of mapping features:

Simple Map (Deprecated)

Basic Map (Free)

Advanced Map

If you are going to use either the Basic, or Advanced, Map Fill option, you will need a Google Maps API Key.

A dialog box will display asking you if you want to 'Get Google Maps API Key’. If you do not already have a Key, click on this button.

If you already have a key click on “Got It”. Enter your key in the Google Maps API Key field.

You can easily access your Google Maps API Key by clicking on the Key icon.

If you clicked on the Get Google Maps API Key button, you will be redirected to the Google Cloud Platform, where you can generate your API key. This example shows you one way to generate a Google Maps API Key, other routes also exist.

You may be asked to log in, or create a Google Account if you do not have one. This is required to generate a Google Maps API Key.

After you have logged in, you will be taken to the Google Cloud Platform,

If this does not happen, go back in to EverWeb. Change the Fill type from Map Fill to None, then back to Map Fill. The dialog box 'Get Google API Key' will be displayed again. Click on this button.

Google may ask you to supply billing and credit card details regardless of whether you will be using the Basic Free or Advanced Map features.

For Basic Free there will be no charge, but for Advanced Map features, Google may charge you.

After setting up any necessary billing details, create a Google Cloud Platform Project if you have not done so already.

Click in the 'Select a Project' box. Click on New Project.

Name the project, then click on the Create button.

Once the project has been created, click on the icon in the top left hand corner. Scroll down to Google Maps Platform. Choose Keys and Credentials.

Google will generate an API key. If this does not happen after a few seconds, click on the Overview menu option. The key should then be  generated.

Copy the key to the clipboard.

Go back to EverWeb and paste the key into the 'Google Maps API Key' field.

You can now use the Map Fill features associated with the mapping level you require.

Enter the location that you want to generate a map for, in the location field.

The Simple Map, Deprecated, option provides basic map functionality similar to those found in EverWeb’s Google Maps widget.

This mapping level displays a basic roadmap, which you can zoom in and out of.

The Basic Map (Free) option builds on the Simple Map allowing you to choose either the Roadmap or Satellite view.

The Advanced Map option, includes all of the simple map’s features, plus additional functionality.

If you choose Satellite View you can toggle labels on or off, whilst Roadmap view allows you to toggle labels and terrain.

Show Controls lets you toggle whether users can use map controls or not.

Ignore Mouse Gestures lets you toggle whether users can use mouse gestures with the map, or not.

Always Show Label On Marker lets you toggle whether to show or hide labels on map markers.

Finally, you can add your own customized labels to your map.