Google Api no funciona en la entrada adjunta

Fondo:

Estoy tratando de agregar la búsqueda de la dirección de Google a un escaparate en línea. No tengo acceso al html real del sitio, pero puedo ingresar código en el encabezado, pie de página e incluir cualquier página css o js que me gustaría. Tuve todo trabajando al principio. Tuve la entrada en el encabezado y pude buscar una dirección.

introduzca la descripción de la imagen aquí

Que creó:

introduzca la descripción de la imagen aquí

Entonces, después de que obtuve mi código de trabajo, llegó el momento de mover la entrada hacia abajo con las otras entradas de dirección. Quería usar javascript para adjuntar esta entrada en un div basado en la identificación del padre. Así que hice esto con este código:

window.onload = function () { var input = document.createElement('div'); input.setAttribute("id", "locationField"); input.innerHTML = ''; var form = document.getElementById('NameAdd'); form.insertBefore(input, form.firstChild); }; 

Lo que produjo esto:

introduzca la descripción de la imagen aquí

Ahora que estoy incluyendo la entrada de esta manera, no muestra los resultados de Google. Al inspeccionar los elementos de la página todo se ve bien. ¿Qué estoy haciendo mal?

El constructor google.maps.places.Autocomplete toma un elemento , no un

.

Esto funciona para mí:

 window.onload = function() { var inputDiv = document.createElement('div'); inputDiv.setAttribute("id", "locationField"); // create input element dynamically so don't need to wait for it to render var input = document.createElement('input'); input.setAttribute("id", "autocomplete"); input.setAttribute("placeholder", "Enter your address"); input.setAttribute("type", "text"); input.setAttribute("autocomplete", "off"); inputDiv.appendChild(input); var form = document.getElementById('NameAdd'); form.insertBefore(input, form.firstChild); var autocomplete = new google.maps.places.Autocomplete(input); };