document.addEventListener("DOMContentLoaded", function() { // Selecteer de invoervelden aan de hand van de 'id' attributen var postalCodeInput = document.getElementById('postcode'); var houseNumberInput = document.getElementById('house_number'); var addressInput = document.getElementById('address'); function initializeAutocomplete() { var autocompleteService = new google.maps.places.AutocompleteService(); var placeService = new google.maps.places.PlacesService(document.createElement('div')); function fillInAddress() { if (!postalCodeInput.value || !houseNumberInput.value) return; autocompleteService.getPlacePredictions({ input: postalCodeInput.value + ' ' + houseNumberInput.value, componentRestrictions: { country: 'NL' } }, function(predictions, status) { if (status !== google.maps.places.PlacesServiceStatus.OK) { console.error(status); return; } if (predictions && predictions.length > 0) { var placeId = predictions[0].place_id; placeService.getDetails({ placeId: placeId }, function(place, status) { if (status === google.maps.places.PlacesServiceStatus.OK) { addressInput.value = place.formatted_address; } }); } }); } postalCodeInput.addEventListener('change', fillInAddress); houseNumberInput.addEventListener('change', fillInAddress); } initializeAutocomplete(); });