The Google Maps add-on shows the location of the listed restaurants on your WordPress site. It helps your customers find and know the basic details of the listed restaurants through its filter options.

Installing The Plugin

The Google Maps add-on of WP Food Manager is easy to install. There are two ways to do it- manually or automatically.

1. Manual Installation : Use the FTP or SFTP tools to install the plugin manually. Check it out to learn how you can install the plugin manually.
2. Automatic Installation : Access the WordPress backend for the automatic plugin installation. Check it out to learn how to install the plugin automatically.

How to set up Google Maps API?

First of all, install and activate the plugin. Then, follow the below-mentioned steps to set up the Google Maps API.

1. Go to your Google Console Account and create an API Key. Click here to learn how to create the API key.
2. Once created, put the API Key into your website’s backend. Follow this path: WP-admin >> Restaurant Manager >> Settings >> General >> Google API Key.
3. Click on ‘Save Changes’.

Note:  Change certain factors in the Google API Library before activating your website’s Google Maps addon. Here are the steps to do that:

1. Go to your Google Console Account.
2. Now, click on APIs & Services. Hit on Dashboard.
   
3. You will see ‘+ENABLE APIS AND SERVICES’ at the top of the page. Click that to go to the ‘Welcome to the API Library’ page.
4. Enable these APIs: Places API, Geocoding API, Maps JavaScript API, and Geolocation API.

Google Maps General Settings

Make changes as per your requirements in the General Settings section to make your Google Maps addon functional.

Follow the steps discussed below to go to the ‘Settings’ section.

WP-admin >> Restaurant Manager >> Settings >> Google Maps General Settings

Now, you will see the options discussed below.

• Google API language: It controls the language appearing on the autocomplete results of Google Maps. You will see a box beside the Google API Language. Simply enter your desired language code in that box. Click here to get a complete list of languages.
• Google API default region: Manage the region of Google API through this option. Enter the country code you want to find in the box displayed beside it. Click here to get the entire list of country codes here.
• Google Address Autocomplete (For Backend Restaurant Submission Form ): This option enables Google to give address suggestions when you type an address in the location box at the website’s backend. Enable or disable your option as per your requirement.
• Google Address Autocomplete(For Frontend Restaurant Submission Form): Google will show address suggestions through this option when your customers type any address in the location box at the front end. The suggestions will be only displayed if it is enabled from the backend by the admin.
• Autocomplete Country Restriction: Enter the country code in the blank box to restrict the country you don’t want to include. Leave it empty if you don’t want to restrict any country.
• Location Marker: Put the URL of the Google Maps marker or icon to show locations on the map.
• Map Style Json: This option enables you to design the restaurant map on your website. Paste the styling code of your selected theme and design for your Google Maps in the blank box.

Follow these steps to get the code.

• Click on the “Generate json style from here” option. 



• Choose your theme.
• Hit the Finish button.



• Copy the code as  shown below.



• Paste the code in the Map Style JSON box.
• Save changes.

Google Maps Search Form Settings

When you know exactly what you are searching for, the search becomes easier. The Search Form Settings of Google Maps allow your customers to filter through options such as Order By, Within, Distance unit etc, making their search more specific. As a result, your customers will easily find all the restaurants within a specific area.

Follow the steps mentioned below to go to the Search Form Settings of Google Map:

1. Go to WP-admin >>Restaurant Manager >> Settings >> Google Maps Search Form Settings
2. Now, you will see the options included in the search form settings.

• Google Address Autocomplete: When your customer starts typing any address, Google displays a list of all possible addresses instantly. Therefore, the customer doesn’t have to type the entire address and can pick the needed address from the Google Maps auto suggestion. This saves both effort and time for the customer.
• Radius: This option displays all the restaurants your customer is looking for within a certain radius. To make it work, you have to enter a single or multiple values separated by commas as the default setting. These values will appear in the dropdown.
• Within Miles/Kilometers: It shows the location of the restaurant within a certain range (in miles or kilometers)of the mentioned location. Once you enter the address in the ‘Location’ field, choose the value of the radius from the dropdown in the Within Miles/Kilometers box. This will show all the relevant restaurants within your selected distance.
  
• Order By: Enter the factors you want to appear in the dropdown of the ‘Order By’ section. Separate each of the factors by a comma. Generally, this includes three main factors like Distance, Title, and Open Restaurants. Let’s see what each of these factors mean.
  

Distance: Displays all the restaurants in the selected distance.

Title: Lets your visitors filter restaurants based on alphabetical order.

Open Restaurant: Shows only the open restaurants at the time of searching.

• Display Maps: Google Maps helps your customers understand quickly and clearly. Therefore, it’s better to enable the Display Maps feature. Turning on this feature will help your customers see the exact location of their selected restaurant in the map. You can even use markers to represent the location of each restaurant in the list of restaurants.
• Maps Width: Set the width of the map in either percentage or pixels. For example: 80% or 300px.
• Maps Height: Enter the height of the map in either percentage or pixels. For example: 80% or 300px
• Maps Type: Set your preferred map type- Terrain, Roadmap, Hybrid, Satellite.
• Enable Maps Scroll Wheel control?: Turn on this feature if you want to let your customers zoom maps in and out using the wheel of their mouse.

Google Maps Single Page Settings

You can add the Google Maps functionality on the restaurant detailing page too. This will enable Google Maps to display the exact location of the restaurant on that page.

Follow the steps mentioned below to set up Google Maps on a Single Page.
WP-admin >>Restaurant Manager >> Settings >> Google Maps Single Page Settings

The setting options you’ll see here are shown below:

• Display Maps: Turn on this feature if you want Google Maps to show the restaurant location on the restaurant detail page.
• Maps Width: Set the map’s width in either percentage or pixels.
• Maps Height: Enter the map’s height in either percentage or pixels.
• Maps Type: Set the map’s type- Satellite, Hybrid, Terrain, Roadmap.
• Enable Maps Scroll Wheel control?: Turn on this feature if you want your customers to zoom maps in and out using their mouse wheel.
• Zoom Level: Set the map’s zoom level. Learn how to do it in detail here.

Advanced: Overriding/Customizing the Templates

Go to wpfm-google-map/templates/ directory to customize or override the template files.

Follow the steps discussed below to override a template.

1. Create a “wpfm-google-map” directory just below your theme folder.
2. Copy the template file to “/wp-content/yourtheme/wpfm-google-map/” directory.
3. Instead of using the template file of the plugin (/wp-content/plugins/wpfm-google-map/), all the template files from the “/wp-content/yourtheme/wpfm-google-map/” will use your theme. 
4. The template file food-google-maps.php has all the users’ maps.

Remember: If you frequently override template files and plugins, sync the newly updated template file with the template file of the plugin for new features and enhanced functionality.