Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change default text "Enter a Location" In Google Maps Places API

I've looked all over the internet trying to find an answer to my problem, and the closest thing I've found to an answer is another Stack Overflow question, here: How do i change the default text in Google Maps API Places Autocomplete

The problem is that either the OP did not have quite the same requirements as myself, or they didn't quite make it clear if they do.

I'm looking for a way to take the default "Enter a Location" in the text input field, and replace it with something else while keeping the same functionality. i.e. have the text disappear on focus, and reappear when it loses focus if no text was entered.

In my current attempt, I've tried to replace the text using a jQuery plugin. It works visually on pageload, but when clicked, "Enter a Location" pops up again, and disappears when text is entered, or the input loses focus (as opposed to the text entry field going blank as intended).

Can anyone give me a pointer here?

Thanks in advance.

like image 230
Douglas Avatar asked Feb 21 '12 14:02

Douglas


People also ask

How do I restrict Google Maps autocomplete to certain cities?

It is currently not possible to restrict results to a specific locality. You can use bounds as you have done so above to bias results towards, but not restricted to places contained within the specified bounds. If you believe restriction by locality would be a useful feature please file a Places API - Feature Request.

How do I add a city to Google places API?

2) Make another web-service call to https://maps.googleapis.com/maps/api/place/details/json?key=API_KEY&placeid=place_id_retrieved_in_step_1. This will return a JSON which contains address_components . Looping through the types to find locality and postal_code can give you the city name and postal code.

How do I restrict Google places API?

Step 1: Ensure you're logged in with the Google account under which you created your Google Maps API key. Step 2: Navigate to Google Console Credentials screen and click to your API key to enter it. Step 3: In API restrictions section choose 'Restrict key' and click on 'Select APIs' dropdown. That's it!

How do I use my Google places API key?

Go to the Google Maps Platform > Credentials page. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key. Click Close.


1 Answers

Just set the placeholder attribute of the input element to which you are attaching the autocomplete to whatever you want:

<input type="text" placeholder="Some new text"> 

This is detailed in the documentation:

By default, the text field created by the Autocomplete service contains standard placeholder text. To modify the text, set the placeholder attribute on the input element.

like image 121
James Allardice Avatar answered Sep 22 '22 14:09

James Allardice