How to embed Google Map on static site

Google maps aren't free to use; pricing is based on the number of times a map on a website is loaded by users. However, the good news is that Google provides a complimentary monthly credit of $200; enough for 28,000 loads of a dynamic map per month which should be more than enough for most small sites.

The map functionality included in some our Cortado Restaurant theme make use of the Google Maps JavaScript API, so before you can enable it on your site you will need to get an API key and enter it into the theme settings in Publii. This key can be generated via the Google Cloud Platform console, which manages the various Google functionalities that developers may want to use on their site.

To get your API key, follow these steps:

Visit the Google Cloud Platform Console; if you're already logged-in to your account you'll see the project screen. Otherwise, log-in or create a new account to get access.
Click on the Project menu, then hit the 'New Project' button. If you've already got a project you want to attach the API to, you can click on that instead.
On the New Project screen, enter a Project Name. You can use whichever name you wish; this is purely for your own use. The 'Location' option can be left blank if it's not needed. Click on the 'Create' button once you're ready.
With the project created, we now need to generate our API key. Open the navigation menu by clicking on the menu icon in the top-left of the page, then select APIs & Services → Credentials.
On the Credentials page will be a single button; 'Create credentials'. Click on this to open a drop-down menu, then click on 'API key'.
A pop-up box will open with your newly-created API key, along with two options; 'Close' and 'Restrict Key'. Click on the 'Restrict Key' option.
By restricting the key, we can make sure that your map functionality is only available on your website. On the API Key page, under Application restrictions, select the HTTP referrers (web sites) option. A new subsection called Website restrictions will appear.
In this section, you'll need to add your website URL to the list of 'allowed' sites, so that it can make requests from the Google Maps API. Click on the 'Add an item' button; in the 'Referrer' field that appears, insert your website URL. You can allow all pages of your site to access the map API by adding a star after the domain e.g. www.example.com/*.
If preferred, you can restrict it to a specific page on your site by adding the exact URL e.g. www.example.com/mappage. If you have multiple sites that will use the API you can continue adding more items via the 'Add an Item' button.
Once you've added all your site addresses, click on the 'Save' button.

You're key is now ready to use, so we can move on to adding it into Publii.

Make sure that you have set the application restrictions and referrers as described above; this prevents the API key from working on other websites and blocks other users from piggy-backing on your account, using up your free credit and potentially incurring additional costs.

To add the key to your site settings, open Publii and click on the 'Theme Settings' option in the left sidebar. In the 'Google Map' section, right under the 'On/Off' button is an 'API key' field; copy and paste your API key here and save the changes.

Setting Your Latitude and Longitude

The latitude and longitude available in the theme settings define where in the world your map will point to when it's loaded, and also places a marker in the exact location you've set. Essentially, latitude and longitude are grid references; the world map is split into a grid using horizontal and vertical lines from an arbitrary centre-point (the equator for the horizontal line, and Greenwich in London for the vertical line, making the centre point about 350 miles South of Ghana, in Africa). Then, the latitude and longitude tell us how far something is from that centre-point.

Using Google Maps, you can find the latitude and longitude of the location you want your map to point to, and add it to Publii. To do so, follow these steps:

Open Google Maps on your computer. Find the location where you want to place a marker and right-click on it to open the context menu.
From the list of options, select 'What's here?'
A card will appear at the bottom of the screen with the location, and the latitude and longitude, separated by a comma e.g. 40.681626, -73.993047 (latitude first, longitude second)
Copy the latitude and longitude into your Publii theme settings, and save the changes.

If you'd prefer to use the Google Maps app on your phone or tablet, you can get the latitude and longitude by long-pressing on the location where you want the marker to be; the latitude and longitude of the marker will be displayed in the search bar.

Additional Options

The only required options for the map in the Cortado theme to function correctly is the API key, and the latitude and longitude. However, Publii includes multiple optional settings that can be set, depending on the functionality you want your site visitors to have access to. All of these options appear under the Theme Settings tab in Publii.

Initial zoom level - Sets how zoomed-in the map will be when it loads. The lower the number, the further out the map will be; so the minimum zoom level will basically show the entire world map, while the maximum will show only your location and the immediate surroundings. The default will be sufficient for most users, but you can fine-tune it with this option if needed.
Zoom and pan - Defines how users can interact with the map on your site. Greedy means the map can be scrolled by swiping with one finger, or dragging with the mouse. Cooperative lets users scroll the page using one finger, or the map using two fingers (or by holding a modifier key such as Control on desktop). None prevents any map interaction control.
Map type control - If enabled, users can switch between map types e.g. satellite, roads etc...using an option in the top-left of the map.
Full-screen control - If enabled, users will have an option to display the map in full-screen.
Zoom control - If enabled, the buttons for changing the zoom level of the map will be displayed.
POIs - If enabled, Points of Interest such as local businesses will be displayed on the map.
Roads - If enabled, all roads will be displayed on the map.
Station - If enabled, train, bus and other public transport stations and lines will be displayed on the map.