How to drag marker and click to set at the same time in Google Maps API v3?

Question

I'm new in Google Maps API v3, I'm trying to add click event listener to re-set the marker, but I want have the posibility to drag the marker too.

Actually I only can drag the marker, this is my code:

var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;

jQuery(document).ready(function(){
     lat = jQuery('#lat').val();
     lng = jQuery('#long').val();
     jQuery('#pasar').click(function(){
        codeAddress();
        return false;
     });
    initialize();
});

    function initialize() {

      geocoder = new google.maps.Geocoder();

       if(lat !='' && lng != '')
      {
         var latLng = new google.maps.LatLng(lat,lng);
      }
      else
      {
         var latLng = new google.maps.LatLng(11.027113, -63.862023);
      }
       var myOptions = {
          center: latLng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP 
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        marker = new google.maps.Marker({
            map: map,
            position: latLng,
            draggable: true 
        });

        updatePosition(latLng);


    }

    function codeAddress() {

        var address = document.getElementById("direccion").value;
        geocoder.geocode( { 'address': address}, function(results, status) {

        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            marker.setPosition(results[0].geometry.location);
            updatePosition(results[0].geometry.location);

            google.maps.event.addListener(marker, 'dragend', function(){
                updatePosition(marker.getPosition());
            });
      } else {
          alert("No podemos encontrar la direccion, error: " + status);
      }
    });
  }

  function updatePosition(latLng)
  {

       jQuery('#lat').val(latLng.lat());
       jQuery('#long').val(latLng.lng());

  }

I tried to add the following code:

myListener = google.maps.event.addListener(map, 'click', function(event) {
        if(marker){marker.setMap(null)}
        placeMarker(event.latLng);
        google.maps.event.removeListener(myListener);
    });

But it does not work. I want to place the marker with both options, dragging and click. How I can achieve that in my code? Thanks!

Answer 1

There is no placeMarker function in your code, and not sure why you only want the marker placed on the first click on the map (you are removing the listener after that). This is what I think you want:

var lat = null;
var lng = null;
var map = null;
var geocoder = null;
var marker = null;
var myListener = null;

jQuery(document).ready(function() {
  lat = jQuery('#lat').val();
  lng = jQuery('#long').val();
  jQuery('#pasar').click(function() {
    codeAddress();
    return false;
  });
  initialize();
});

function initialize() {

  geocoder = new google.maps.Geocoder();

  if (lat != '' && lng != '') {
    var latLng = new google.maps.LatLng(lat, lng);
  } else {
    var latLng = new google.maps.LatLng(11.027113, -63.862023);
  }
  var myOptions = {
    center: latLng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

  marker = new google.maps.Marker({
    map: map,
    position: latLng,
    draggable: true
  });
  google.maps.event.addListener(marker, 'dragend', function() {
    updatePosition(marker.getPosition());
  });
  updatePosition(latLng);
  google.maps.event.addListener(map, 'click', function(event) {
    if (marker) {
      marker.setPosition(event.latLng)
    } else {
      marker = new google.maps.Marker({
        map: map,
        position: event.latLng,
        draggable: true
      });
    }
    updatePosition(event.latLng);
  });

}

function codeAddress() {

  var address = document.getElementById("direccion").value;
  geocoder.geocode({
    'address': address
  }, function(results, status) {

    if (status == google.maps.GeocoderStatus.OK) {
      map.setCenter(results[0].geometry.location);
      marker.setPosition(results[0].geometry.location);
      updatePosition(results[0].geometry.location);

      google.maps.event.addListener(marker, 'dragend', function() {
        updatePosition(marker.getPosition());
      });
    } else {
      alert("No podemos encontrar la direccion, error: " + status);
    }
  });
}

function updatePosition(latLng) {

  jQuery('#lat').val(latLng.lat());
  jQuery('#long').val(latLng.lng());

}

html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="42" />
<input id="long" value="-85" />
<input id="pasar" type="button" value="geocode" />
<input id="direccion" value="New York, NY" />
<div id="map_canvas" style="border: 2px solid #3872ac;"></div>