1. Install the Google Maps JavaScript API
To integrate Google fountains in WordPress, you first need to install the Google Maps JavaScript API. The API is responsible for displaying the map on your website and allowing users to interact with it. You can install the API by following these steps:
- Go to the Google Cloud Console website and log in to your Google account.
- Create a new project by clicking on the “Select a Project” dropdown in the top navigation and clicking “New Project”.
- Give your new project a name and click “Create”.
- Once your project is created, click on the “APIs & Services” menu in the left navigation and click “Dashboard”.
- Click on the “Enable APIs and Services” button at the top of the page.
- Search for “Maps JavaScript API” and click on the result.
- Click the “Enable” button.
1. Create a Google Maps API Key
Next, you need to create a Google Maps API key. This key is used to authenticate your website with the Google Maps JavaScript API and ensures that only your website can display the map. Here’s how to create an API key:
- From the “APIs & Services” dashboard, click on “Credentials” in the left navigation.
- Click on the “Create credentials” button and select “API key”.
- You can choose to restrict your API key to specific web domains if you want. If not, leave the field blank.
- Click on the “Create” button.
1. Install a Google Maps plugin for WordPress
There are several WordPress plugins that allow you to add Google Maps to your website. One popular choice is WP Google Maps. To install this plugin:
- Login to your WordPress website and navigate to Plugins → Add New.
- Search for “WP Google Maps” in the search bar.
- Click on the “Install Now” button and then click “Activate” once the installation is complete.
1. Configure WP Google Maps
Once you have installed the plugin, you need to configure it to display fountains using the Google Maps API key you created earlier. Here’s how:
- Click on “Maps” in the left navigation of the WordPress admin dashboard.
- Click on the “Add New Map” button.
- Give your map a name and choose a map type (e.g. road map, satellite, terrain, etc.).
- Under “Map Center”, enter the address or coordinates where you want the map to be centered.
- Under “Map Markers”, click the “Add marker” button to add a new marker.
- Enter the address or coordinates of the fountain you want to add.
- Click on the “Save Map” button to save your changes.
That’s it! Your Google fountains integration is now complete. You can customize the map further by adding different markers, changing the colors, and more.
