The Scrivito Example App comes with a Google Maps widget you can use on any page. The location the widget should display as well as a couple of display options can be set via the widget properties.
However, after closing the properties dialog, the map might not be displayed if you haven’t provided the app with a Google Maps API key.
Here’s how such a key can be obtained and then set in the Example App.
First, you need to have a Google account and be logged in to it, of course. Then, open https://developers.google.com/maps/gmp-get-started#api-key. Google lets you make 1000 API requests per key for free.
Click “Select or create project” and create a project if you don’t have one already and only want to look up the key. Then click NEXT to have your key generated.
Afterwards, your new API key is displayed; you might want to copy it to the clipboard for pasting it to the Example App later on.
We recommend to not click DONE now but switch to the “API Console” to protect your key from being used illegitimately.
Next to replacing the key with a new one (in case it has been misused) or deleting it, the Google API Console lets you restrict the use of the key to specific websites. We highly recommend doing this by specifying all the sites the key is used on as “HTTP referrers”, including your local development URL (localhost:8080) and your production, preview, and staging sites.
After entering your HTTP referrers, save the changes you made in the API console, and you are ready to go! By the way, Google provides a Dashboard for managing all your Google APIs and services.
The Scrivito Example App has several website-related (not just page-related) settings which can be accessed via the “Site settings” tab in the homepage properties. So, navigate to the homepage and open the page properties in Edit mode. Then scroll down and paste your Google Maps API key to the corresponding input field, and close the dialog.
That was it! You can now reload the page containing the map or change the location to be displayed in the widget and see how the map gets updated.
Don’t forget to publish the working copy to activate your map for the visitors of your site.