How to Add Autocomplete for Address Fields in WordPress

Recently, one of our users asked us how to add autocomplete for address fields in WordPress forms. Autocomplete allows users to quickly select address from suggestions generated in realtime as they type. In this article, we will show you how to add autocomplete for address… Read More »

The post How to Add Autocomplete for Address Fields in WordPress appeared first on WPBeginner.

Recently, one of our users asked us how to add autocomplete for address fields in WordPress forms. Autocomplete allows users to quickly select address from suggestions generated in realtime as they type. In this article, we will show you how to add autocomplete for address fields in WordPress using Google Places API.

How to add autocomplete to address fields in WordPress

First thing you need to do is install and activate the Address Autocomplete Using Google Place Api plugin. For more details, see our step by step guide on how to install a WordPress plugin.

Upon activation, you need to visit Settings » Google Autocomplete page to configure plugin settings.

Autocomplete address field plugin settings page

You will be asked to enter Google Places API Key. This API key allows your website to connect with Google Maps and retrieve autocomplete suggestions from their database in realtime.

Head over to Google Developer Console website and create a new project.

Create a new project

A popup will appear asking you to provide a name for your project. Use a name that will help you later identify the project and then click on the create button.

The popup will disappear, wait for a few seconds and you will be automatically redirected to your new project.

Now you will see the list of popular Google APIs that you can enable for your project. You need to locate and click on ‘Google Places API Web Service’.

Select Google Places API

This will take you to an overview page explaining how this API works. You need to click on the Enable link to continue.

Enable Places API

Developer console will now enable Google Places API for your project.

However, you will still need credentials to use the API on your website. So go ahead and click on the create credentials button to continue.

Get API credentials

On the next screen, you need to click on ‘What credentials do I need?’ button.

What credentials do I need

Developer console will now show you the API key. You need to copy this key and paste it under the plugin settings on your WordPress website.

Copy API Key

You still need to enable another API on your Google Developers project. Click on the library in Google Developer Console and then click on ‘Google Maps JavaScript API’.

Google Maps JavaScript API

This will take you to API’s overview page where you need to click on the ‘Enable’ link to continue.

Enable JavaScript API

This API doesn’t need an extra API key, so you are now good to go.

Enabling Autocomplete Address in WordPress Form Fields

You can add autocomplete address feature to any form field created by any WordPress form builder plugin.

We will be using WPForms in this tutorial. However, these instructions will work no matter what contact form plugin you are using.

First you need to create a form that has an address field or a set of address fields.

Once you are done, add this form to your website like you would normally do.

Next, go to the post or page where you added your form. You need to right click the address field and select ‘Inspect’ from browser menu.

Inspect form address field

You will see the name, ID, and CSS class values for the address field.

For example, in this screenshot our form’s name value is wpforms[fields][9][address1], ID value is wpforms-352-field_9, and css class is wpforms-field-address-address1.

You need to copy just one of these values and paste it in plugin settings page.

If you want to target multiple fields in multiple forms, then you can just add a comma and add another value.

Target address fields in your form

Don’t forget to click on the save button to store your changes.

That’s all, you can now visit your form page and try entering an address. The form field will automatically start showing suggestions using Google places and Google Maps.

Address autocomplete preview

We hope this article helped you learn how to add autocomplete for address fields in WordPress. You may also want to see our list of 24 must have WordPress plugins for business websites.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Add Autocomplete for Address Fields in WordPress appeared first on WPBeginner.

7 Best Free Google Maps Plugins For WordPress

Are you looking to add Google Maps on your WordPress site? There are plenty of free Google Maps plugins available for WordPress which makes it difficult to know which is the best. In this article, we will show you the 7 best free Google Maps… Read More »

To leave a comment please visit 7 Best Free Google Maps Plugins For WordPress on WPBeginner.

Are you looking to add Google Maps on your WordPress site? There are plenty of free Google Maps plugins available for WordPress which makes it difficult to know which is the best. In this article, we will show you the 7 best free Google Maps plugins for WordPress.

Adding Google Map in WordPress

Before we discuss Google Maps plugin, it’s important to emphasize that Google Maps offer an embed code which you can customize and paste in your WordPress posts or pages without using any plugins.

Manually embed a Google Map

However, you will have to switch to the text editor to add it in posts or pages.

Also, there are not many customization options available for the default embed code. You cannot add custom information to the map.

This is where Google Maps plugin come in handy. Using a plugin will allow you to add locations, markers, directions, routes, etc. Your map will be interactive and more useful to the users.

Having said that, here is our list of the best free Google Maps plugins for WordPress.

1. MapPress Easy Google Maps

MapPress settings page

MapPress Easy Google Maps is one of the most popular free Google maps plugin. It allows you to easily add a Google map to any WordPress post, page or custom post type by simply typing the address.

You can embed the map automatically before or after a post. You can also use a shortcode to insert the map within the post. See our tutorial on how to add Google Maps in WordPress for more detailed instructions.

2. Google Maps Builder

Maps Builder - Google Maps Plugin

Maps Builder comes with a beautiful map customization experience with tons of options. You can easily add locations, choose map size, controls, map types, and even choose a map theme. All of this can be done in a visual customizer.

Adding a map to a post is easy. All you need to do is click a button on the post editor and select your map. Maps builder also allows you to add custom markers, and you can even show nearby places with Google places.

3. WP Google Maps

WP Google Maps

WP Google Maps is another free Google maps plugin. You can easily create maps by entering an address, get directions, set markers, etc.

It comes with a map widget that you can add to your WordPress site’s sidebar or any widget ready area. Your users can also switch to street view without leaving your site.

4. WP Google Map Plugin

WP Google Map Plugin

Another great option for highly interactive Google maps is WP Google Map Plugin. It comes with a great set of features allowing you to create beautiful maps with lots of custom information.

You can add colorful markers, information windows, redirect users when they click on map, and easily embed maps with shortcode. You can save multiple locations and then create a map showing these locations with custom markers.

5. Google Maps Widget

Google map widget

Want to quickly display a map in a sidebar widget? Google Maps Widget allows you to easily add a Google Map in your sidebars or any other widget ready areas. Clicking on a map will open the map in a lightbox popup with a larger view. You can also choose pin colors and even use your own image as a pin.

6. Basic Google Maps Placemarks

 Basic Google Maps Placemarks

Want to add a Google map to your site with your own custom placemarks? Basic Google Maps Placemarks allows you to add placemarks with address, assign them categories, add custom marker if you like.

You can create as many placemarks as you need and then display them all together on a map using shortcodes. You can also create categories to create different maps showing different locations and placemarks.

7. CP Google Maps

CP Google Maps

CP Google Maps plugin allows you to easily associate geo location data to a post and display map with your custom images. You can choose a custom marker to be placed on the map for a location. Most of the plugin’s other great features are locked and require the paid version of the plugin.

We hope this article helped you find the best free Google Maps plugin for your WordPress site. You may also want to check out our comparison of 5 best contact form plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit 7 Best Free Google Maps Plugins For WordPress on WPBeginner.

7 Best Free Google Maps Plugins For WordPress

Are you looking to add Google Maps on your WordPress site? There are plenty of free Google Maps plugins available for WordPress which makes it difficult to know which is the best. In this article, we will show you the 7 best free Google Maps… Read More »

To leave a comment please visit 7 Best Free Google Maps Plugins For WordPress on WPBeginner.

Are you looking to add Google Maps on your WordPress site? There are plenty of free Google Maps plugins available for WordPress which makes it difficult to know which is the best. In this article, we will show you the 7 best free Google Maps plugins for WordPress.

Adding Google Map in WordPress

Before we discuss Google Maps plugin, it’s important to emphasize that Google Maps offer an embed code which you can customize and paste in your WordPress posts or pages without using any plugins.

Manually embed a Google Map

However, you will have to switch to the text editor to add it in posts or pages.

Also, there are not many customization options available for the default embed code. You cannot add custom information to the map.

This is where Google Maps plugin come in handy. Using a plugin will allow you to add locations, markers, directions, routes, etc. Your map will be interactive and more useful to the users.

Having said that, here is our list of the best free Google Maps plugins for WordPress.

1. MapPress Easy Google Maps

MapPress settings page

MapPress Easy Google Maps is one of the most popular free Google maps plugin. It allows you to easily add a Google map to any WordPress post, page or custom post type by simply typing the address.

You can embed the map automatically before or after a post. You can also use a shortcode to insert the map within the post. See our tutorial on how to add Google Maps in WordPress for more detailed instructions.

2. Google Maps Builder

Maps Builder - Google Maps Plugin

Maps Builder comes with a beautiful map customization experience with tons of options. You can easily add locations, choose map size, controls, map types, and even choose a map theme. All of this can be done in a visual customizer.

Adding a map to a post is easy. All you need to do is click a button on the post editor and select your map. Maps builder also allows you to add custom markers, and you can even show nearby places with Google places.

3. WP Google Maps

WP Google Maps

WP Google Maps is another free Google maps plugin. You can easily create maps by entering an address, get directions, set markers, etc.

It comes with a map widget that you can add to your WordPress site’s sidebar or any widget ready area. Your users can also switch to street view without leaving your site.

4. WP Google Map Plugin

WP Google Map Plugin

Another great option for highly interactive Google maps is WP Google Map Plugin. It comes with a great set of features allowing you to create beautiful maps with lots of custom information.

You can add colorful markers, information windows, redirect users when they click on map, and easily embed maps with shortcode. You can save multiple locations and then create a map showing these locations with custom markers.

5. Google Maps Widget

Google map widget

Want to quickly display a map in a sidebar widget? Google Maps Widget allows you to easily add a Google Map in your sidebars or any other widget ready areas. Clicking on a map will open the map in a lightbox popup with a larger view. You can also choose pin colors and even use your own image as a pin.

6. Basic Google Maps Placemarks

 Basic Google Maps Placemarks

Want to add a Google map to your site with your own custom placemarks? Basic Google Maps Placemarks allows you to add placemarks with address, assign them categories, add custom marker if you like.

You can create as many placemarks as you need and then display them all together on a map using shortcodes. You can also create categories to create different maps showing different locations and placemarks.

7. CP Google Maps

CP Google Maps

CP Google Maps plugin allows you to easily associate geo location data to a post and display map with your custom images. You can choose a custom marker to be placed on the map for a location. Most of the plugin’s other great features are locked and require the paid version of the plugin.

We hope this article helped you find the best free Google Maps plugin for your WordPress site. You may also want to check out our comparison of 5 best contact form plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

To leave a comment please visit 7 Best Free Google Maps Plugins For WordPress on WPBeginner.