Remove placeholder text from Google Maps Places API

Question

I'm using the Google Maps Places API Autocomplete function to provide a location autocomplete on a page, similar to this: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform

I'm also using Google Material Design Lite to style my input boxes. This is all working fine, apart from the placeholder text. MDL uses label tags to provide placeholder text and a highlighting underline, but the Google Maps Places API uses a placeholder attribute on the input tag, which appears to override the MDL placeholder text and stop the underline effect from working; in addition, it appears I can't style the placeholder text for it to be a different color/opacity.

I'd like to be able to turn off the Google Maps Places API placeholder text, but even setting the attribute to be an empty string appears to break the Google MDL label (the placeholder text doesn't appear).

Is there a way I can stop the Google Maps API from putting placeholder text in my input box?

Have you tried just not using a placeholder attribute in your html? `` — nibnut, Jan 12 '17 at 20:54
Please provide a [Minimal, Complete and Verifiable example](http://stackoverflow.com/help/mcve). — MrUpsidown, Jan 13 '17 at 10:53

score 20 · Answer 1 · answered Jan 13 '17 at 15:54

20

You have just to add in your input html: placeholder=""

answered Jan 13 '17 at 15:54

Greencame

219
1
2

score 1 · Answer 2 · answered Jan 14 '17 at 00:41

It turns out MDL has a "has-placeholder" CSS class that prevents displaying labels for input text boxes which have a placeholder attribute.

Setting the placeholder attribute to empty stops google maps from putting "Enter a location" into the text box, but the attribute causes MDL's CSS to hide the label placeholder.

To fix this, I overrode the "has-placeholder" MDL CSS to fix the visibility. As an example, here's my MDL text field:

        <div class="mdl-textfield mdl-js-textfield" id="location-textfield">

            <!-- NOTE: this input field uses google maps autocomplete -->
            <input class="mdl-textfield__input" type="text" id="location-input" onFocus="geolocate()" placeholder="">
            <label class="mdl-textfield__label" for="location" id="location-label">Location</label>
        </div>

And here's the CSS to fix the visibility:

/* fix for MDL not displaying labels when input field has empty string placeholder.
    the empty string placeholder is to stop google maps API filling the placeholder */
#location-label {
    visibility: visible;
}

.is-dirty #location-label {
    visibility: hidden;
}

score 1 · Answer 3 · answered Jan 16 '20 at 12:38

1

Set the placeholder attribute to "&nbsp"

<input id="autocomplete" type="text" value="" placeholder="&nbsp;">

answered Jan 16 '20 at 12:38

Stefo

11
2

score 0 · Answer 4 · answered Mar 06 '17 at 17:30

Robert Sharp's answer didn't work for me (no effect)
MacPrawn: No placeholder in the input element makes Google automatically create one, so you are stuck with that

Here is what I did:

Set the placeholder attribute of your input element to empty string. placeholder=""
Add an event listener on the mdl-componentupgraded element of your input element's outer div and remove its has-placeholder class.
No special CSS or anything needed.

For step 2, this is my JavaScript:

document.getElementById("address").parentNode.addEventListener("mdl-componentupgraded", function(e) { removeClass(document.getElementById("address").parentNode, "has-placeholder"); });

// removes a class "classToRemove" to an element if that class is present
function removeClass(element, classToRemove) {
  var classesString;
  classesString = element.className || "";
  if (classesString.indexOf(classToRemove) !== -1) {
    // classToRemove is present
    element.className = element.className.replace(new RegExp('(?:^|\\s)' + classToRemove + '(?:\\s|$)'), ' '); // from http://stackoverflow.com/a/2155786
  }
}

Here is my HTML code:

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
  <input class="mdl-textfield__input" id="address" type="text" value="" placeholder=""> <!-- NOTE: this input field uses google maps autocomplete -->
  <label class="mdl-textfield__label" for="address">This is my address label</label>
</div>

score -2 · Answer 5 · answered May 29 '18 at 14:35

Had the same issue you were facing. The second object in the AutoComplete method is options, you can simply pass there placeholder as undefined

const myElement = document.getElementById('ELEMENT_ID');
var autocomplete = new google.maps.places.Autocomplete(myElement, { placeholder: undefined });

Remove placeholder text from Google Maps Places API

5 Answers5