Livewire.emit is not a function

Question

I just learned how to use google maps with javascript in Livewire. I did a test project and everything works fine for me. When trying to move my project to a productive project I receive the following error:

Livewire.emit is not a function

I am using google search box:

<input id="pac-input" class="controls" type="text" placeholder="Search Box" />
<div id="map"></div>

The search performs well. But I need to send the latitude and longitude to a Livewire listener

Livewire.emit('getLatitude', place.geometry['location'].lat());
Livewire.emit('getLongitud', place.geometry['location'].lng());

As I mentioned in the test project it works well for me, in the productive one it does not. Check that the main tags are DIV, I tried using @push @livewirescripts and I can't detect the problem

the full javascript code I use:

<script>
function initAutocomplete() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: -35.2385, lng: -65.6740 },
    zoom: 6,
    mapTypeId: "roadmap",
  });
  // Create the search box and link it to the UI element.
  const input = document.getElementById("pac-input");
  const searchBox = new google.maps.places.SearchBox(input);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  // Bias the SearchBox results towards current map's viewport.
  map.addListener("bounds_changed", () => {
    searchBox.setBounds(map.getBounds());
  });
  let markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener("places_changed", () => {
    const places = searchBox.getPlaces();

    if (places.length == 0) {
      return;
    }
    // Clear out the old markers.
    markers.forEach((marker) => {
      marker.setMap(null);
    });
    markers = [];
    // For each place, get the icon, name and location.
    const bounds = new google.maps.LatLngBounds();
    places.forEach((place) => {
      if (!place.geometry || !place.geometry.location) {
        console.log("Returned place contains no geometry");
        return;
      }
      const icon = {
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(25, 25),
      };
      // Create a marker for each place.
      markers.push(
        new google.maps.Marker({
          map,
          icon,
          title: place.name,
          position: place.geometry.location,
        })
      );

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
        bounds.union(place.geometry.viewport);
      } else {
        bounds.extend(place.geometry.location);
      }

      /* document.getElementById('lat-span').value = (place.geometry['location'].lat());
      document.getElementById('lon-span').value = (place.geometry['location'].lng());
      document.getElementById('location-snap').value = place.formatted_address; */

      /* document.getElementById('lat-span').innerHTML = (place.geometry['location'].lat());
      document.getElementById('lon-span').innerHTML = (place.geometry['location'].lng());
      document.getElementById('location-snap').innerHTML = place.formatted_address; */

      Livewire.emit('getLatitude', place.geometry['location'].lat());
      Livewire.emit('getLongitud', place.geometry['location'].lng());

    });
    /* console.log(searchBox); */
    map.fitBounds(bounds);
  });
}

That I could try to fix it? Thanks for your time

Answer 1

I solved it by setting the property as follows:

@this.set('latitud', place.geometry['location'].lat());

@this.set('longitud', place.geometry['location'].lng());