0

I use a google Map to collect point data, that is saved to a Postgis database. With dblclick the user adds a marker, that is draggable and has a listener that opens (onclick) a modal dialog window to enter additional data. When the data is saved to the database (via php-script), the standard marker is replaced by a marker that reflects the type of point acquired. The user can than add the next point.

All this works fine, I only have the problem, that the dblclick-event can be fired a few times, so that the user gets confused with several new markers.

The addListenerOnce doesn't help me since the user usually needs to add a bunch of new points. Also this old post didn't help googlemaps-v3-api-create-only-1-marker-on-click since it is intended to only use ONE point.

How can I prevent the dblclick-event to add new markers, as long, as the first one isn't saved?

   var marker;
   var modalOnClick;

   //Add listener to map, to insert new Marker with modal
   google.maps.event.addListener(map, "dblclick", function(event){
     marker = new MarkerWithLabel ({
      position: event.latLng,
      map: map,
      icon:mmcross,
      draggable: true,
        labelContent: '',
        labelAnchor: new google.maps.Point(15,33),
        labelClass: "labels", // the CSS class for the label
        labelInBackground: false 
     }); 

    map.setCenter(event.latLng);           
      //Open Modal Form to insert data
    modalOnClick = google.maps.event.addListener(marker, 'click', function() {
      $('#myModal').modal('show');                  
    });
   });



// Function to save data
function saveData(){
  ...

    $('#myModal').modal('hide');
    google.maps.event.removeListener(modalOnClick);
}; // END saveData()
  • This shows the link to the google article developers.google.com/maps/articles/phpsqlinfo_v3 I initially used as starting point. The google code has the same problem. The user can add several markes and only the position of the last one is saved to the db. This behavior is somehow confusing since the user runs into a situation where he could have a few markers on the map, but the input form is only attached to the last marker. I admit, that the google example is in this case somehow clearer since they use an infowindow that is visible attached to the marker. – geom Jan 7 '18 at 10:50
  • I've tried with google.maps.event.addListenerOnce, but I only can insert one marker. Is there a way to reset this listener e.g. at the end of my saveData() function? so that the user can continue adding new points. – geom Jan 7 '18 at 12:32
1

After further looking around, I didn't find a solution so I resolved this in introducing an if statement that checks if a marker exists already and what kind of marker Icon is assignend actually to the marker. This works since I use a bigger circle with a cross inside to have a marker, that can also be used on tablets where precise placement with Googles default markers doesn't work well. So I only changed the first part of my code.

It's not a very elegant method, but it works as expected. So if someone has a better solution it would be nice to know it.

markerOnDblClick = google.maps.event.addListener(map, "dblclick", function(event){
    if (!marker || marker.getIcon().url != './images/mapmarker_.png') {
      marker = new MarkerWithLabel ({
          position: event.latLng,
          map: map,
          icon:mmcross, // the icon used is ./images/mapmarker_png
          draggable: true,
            labelContent: '',
            labelAnchor: new google.maps.Point(15,33),
            labelClass: "labels", // the CSS class for the label
            labelInBackground: false 
        }); 

      map.setCenter(event.latLng);           
          //Open Modal Form to insert data
      modalOnClick = google.maps.event.addListener(marker, 'click', function() {
          $('#myModal').modal('show');                  
      });  
   } else {
     doNothing();
   }
   });
1

In alternative, you could remove the listener after the first execution.

For example to simulate an addListenerOnce to click event:

var onClick = google.maps.event.addListener(map, "click", function(event){
  console.log("click", event);
  google.maps.event.removeListener(onClick);
});

Check this fiddle: http://jsfiddle.net/beaver71/10v63qL6/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.