Chrome Autofill covers Autocomplete for Google Maps API v3

Question

I am using Google Maps Javascript v3 to setup autocomplete on an HTML input field like so:

http://imgur.com/Rm6X2FI.png - (w/out autofill)

The issue I'm having is that Chrome's Autofill covers up the Maps Autocomplete like this:

http://imgur.com/7a2QM7L.png - (w/ autofill)

I found a solution online a couple of months ago (ref: Disabling Chrome Autofill), but it seems that this solution no longer has any effect.

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none">
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" />

Is there any way I can stop Chrome's Autofill from showing on top of the Google Maps Autocomplete list?

EDIT: Stop Google chrome auto fill the input does not provide a solution to my current issue. The issue is with the Chrome Autofill dropdown on the input field, not the input field being automatically filled with an autofill value.

Answer 1

None of the above answers worked for me (Chrome 64.0.3282.186, x64 windows).

TL;DR: The Google Maps code is changing the autocomplete attribute to off, so even if you set it to new-password, you'll still get autofill. The hack I'm using is to listen for mutations on that attribute and then override it. Note: simply changing the attribute after calling into Google Maps does not work.

Set up a MutationObserver before initializing Google Maps Autocomplete that immediately stops listening for mutations and then sets the attribute to new-password.

    var autocompleteInput = document.getElementById("id-of-element");

    var observerHack = new MutationObserver(function() {
        observerHack.disconnect();
        $("#id-of-element").attr("autocomplete", "new-password");
    });

    observerHack.observe(autocompleteInput, {
        attributes: true,
        attributeFilter: ['autocomplete']
    });