[GIS] Allow to insert only one unsaved marker on Google Map

google mapsjavascript

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()

Best Answer

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();
   }
   });
Related Question