Search code examples
javascriptgoogle-maps-api-3listenerdispatcheventreact-google-maps-api

When I try to dispatch I have the error "map.dispatchEvent is not a function"


I create several points on the map (google maps api JS) and it works perfectly, my problem is when I try to place a point with the same coordinates as an existing point. I can get the coordinates of that point, but I need a new point to be created. Because the listener is waiting for a click on the map object it does not execute code within the listener. It would be really important to run listener code when clicking on an already exiting point. After several searches, what I thought would work would be the use of the function dispatchEvent(), but when used I get "map.dispatchEvent is not a function". Does anyone know how I can use disptchEvent() for this scenario.

Example: When I click on the point created to get the same coordinates

In case i'm not specific, tell me.

// Draw lines for Zones of sign
drawPolyLineOnMap(zoneType) {
   var linePoint = [];
   this.$refs.mapRef.$mapPromise.then(map => {
      var markerIcon = "";
      var polyColor = "";

      switch (zoneType) {
         case 1:
            markerIcon = "http://maps.google.com/mapfiles/ms/icons/orange.png";
            polyColor = "#ff9900";
            break;
         case 2:
            markerIcon = "http://maps.google.com/mapfiles/ms/icons/pink.png";
             polyColor = "#e661ac";
             break;
         case 3:
             markerIcon = "http://maps.google.com/mapfiles/ms/icons/purple.png";
             polyColor = "#8e67fd";
             break;
         }

         var poly = new google.maps.Polyline({
            strokeColor: polyColor,
            strokeOpacity: 1.0,
            strokeWeight: 3
         });

         poly.setMap(map);
         var clickCounter = 0;

         this.addZoneListener = map.addListener('click', mapsMouseEvent => {
            clickCounter++;

            const path = poly.getPath();
            // Because path is an MVCArray, we can simply append a new coordinate
            // and it will automatically appear.
            path.push(mapsMouseEvent.latLng);

            // Add a new marker at the new plotted point on the polyline.
            var marker = new google.maps.Marker({
               position: mapsMouseEvent.latLng,
               title: "#" + path.getLength(),
               map: map,
               icon: markerIcon,
               clickable: true,
            });

            marker.addListener("click", () => {
               this.test(marker.position)
               //I WANT TO PASS THE COORDINATION MARKER TO LISTENER FROM ABOVE
               map.dispatchEvent(new Event('click'), marker.position);
            });

            switch (zoneType) {
               case 1:                     
                  this.$refs.insertSignRef.detectionZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.detectionZonePolyLine = poly;
                  this.detectionZoneToggle = false;
                  break;
               case 2:                          
                  this.$refs.insertSignRef.awarenessZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.awarenessZonePolyLine = poly; 
                  this.awarenessZoneToggle = false;
                  break;
               case 3:
                  this.$refs.insertSignRef.relevanceZoneMarkers.push(marker); 
                  this.$refs.insertSignRef.relevanceZonePolyLine = poly; 
                  this.relevanceZoneToggle = false;
                  break;
               }

               linePoint.push(mapsMouseEvent.latLng.toJSON());

               if (clickCounter == 1) {
                  this.disableToolbox = true;
               }

               if (clickCounter == 2) {
                  this.enableConfirmToolbox = true;
               }

               this.stayToastMessage = "Click on map to insert the " + clickCounter + "º point for the Area";

               if (clickCounter >= 30) {
                  this.disableToolbox = false;
                  this.enableConfirmToolbox = false;
                  this.showStayToast = false;
                  this.stayToasts = 0;
                  this.addZoneListener.remove();
               }
            });
         });

         return linePoint;
     },

Solution

  • Instead of map.dispatchEvent(new Event('click'), marker.position); You should be using:

    marker.addListener("click", () => {
        google.maps.event.trigger(map, 'click', {
            latLng: mapsMouseEvent.latLng
        });
    });
    

    Adapted from: https://stackoverflow.com/a/9194984/6195472