Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Netfusion's avatar

Google Maps API with livewire

Hello,

i have this javascript code for autocomplete from google maps api:

 
			
function initMap() {
			locationAutocomplete.addListener('place_changed', function() {
      					var place = locationAutocomplete.getPlace();
                		if (place.geometry) {
                    				var lat = place.geometry.location.lat();
                    				var lng = place.geometry.location.lng();
              						map.setCenter(place.geometry.location);
                    				map.setZoom(15);
                    				location = {
                        						lat: lat,
                        						lng: lng
                    				};
                    				var marker = new google.maps.Marker({
                        						position: location,
                        						map: map,
                        						title: "Location"
                    				});
                	} 
            });

}


and i have the location this inputbox

 
			
< input  type="text" id="location" placeholder="Location" wire:model="location">

the only thing in my laivewire component is to declare public $location

i always get the error

 
			
 Livewire encountered corrupt data when trying to hydrate 

i tried wire:model.defer, but it only gets the value thats typed and not the location thats choosen in the autocomplete dropdown

anyone can help me with the error? and thank you very much

0 likes
1 reply
whoisthisstud's avatar

If you can post your LIvewire component class and view, it would help to understand what's going on.

Please or to participate in this conversation.