If you’d like to create a button in the search bar that the user can use to automatically fill in his current location, then you first need to create a custom template.

In the template code look for line 13 that outputs the search input field. Below that line include the following code.

This will display the same icon as used on the map itself. If you don’t want this, then leave out the span tags and replace it with your own image.

Position the Button

If you want to position the button directly after the search input field, and make the mouse cursor change on mouse over, then place the following CSS code in the style.css in your active theme folder.

If you want to make the geolocation icon smaller, then you can do this by include the font-size property in the CSS code.

You can adjust the 18 to a smaller number to make the icon smaller.

Remove the Geolocation Icon From the Map

In case you have enable the ‘Attempt to auto-locate the user’ option on the settings page, and you’d like to remove the geolocation button from map after placing one in the search bar as well, then you can do so with the CSS code below.