I have created a Google Map form that lets users enter an address into a text field and geocode the entry. This then puts a marker on a map. This works fine, but I want to add an additional addListener so when the user clicks the map it will add another pin where they click. For some reason my 'click' addListener is not working. How would I have multiple add Listeners like that?

I attached my current code:

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.7,-74.0),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

    var input = document.getElementById('searchTextField');
    var autoplete = new google.maps.places.Autoplete(input);

    autoplete.bindTo('bounds', map);

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

    google.maps.event.addListener(autoplete, 'place_changed', function() {
      var place = autoplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(16);
      }

      var image = ".png";
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);



      var address = '';
      if (place.address_ponents) {
        address = [(place.address_ponents[0] &&
                    place.address_ponents[0].short_name || ''),
                   (place.address_ponents[1] &&
                    place.address_ponents[1].short_name || ''),
                   (place.address_ponents[2] &&
                    place.address_ponents[2].short_name || '')
                  ].join(' ');
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addListener(map, 'click', function() {
    //alert("Hello! I am an alert box!!");

    var marker1 = new google.maps.Marker({
      map: map,
      draggable: true
    });
    var image = ".png";
      marker1.setIcon(image);
      marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
    map.addOverlay(marker1);
});

</script>

I have created a Google Map form that lets users enter an address into a text field and geocode the entry. This then puts a marker on a map. This works fine, but I want to add an additional addListener so when the user clicks the map it will add another pin where they click. For some reason my 'click' addListener is not working. How would I have multiple add Listeners like that?

I attached my current code:

  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(40.7,-74.0),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);

    var input = document.getElementById('searchTextField');
    var autoplete = new google.maps.places.Autoplete(input);

    autoplete.bindTo('bounds', map);

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

    google.maps.event.addListener(autoplete, 'place_changed', function() {
      var place = autoplete.getPlace();
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(16);
      }

      var image = "http://www.google./mapfiles/marker_green.png";
      marker.setIcon(image);
      marker.setPosition(place.geometry.location);



      var address = '';
      if (place.address_ponents) {
        address = [(place.address_ponents[0] &&
                    place.address_ponents[0].short_name || ''),
                   (place.address_ponents[1] &&
                    place.address_ponents[1].short_name || ''),
                   (place.address_ponents[2] &&
                    place.address_ponents[2].short_name || '')
                  ].join(' ');
      }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);

google.maps.event.addListener(map, 'click', function() {
    //alert("Hello! I am an alert box!!");

    var marker1 = new google.maps.Marker({
      map: map,
      draggable: true
    });
    var image = "http://www.google./mapfiles/marker_green.png";
      marker1.setIcon(image);
      marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
    map.addOverlay(marker1);
});

</script>

• javascript
• google-maps
• google-maps-api-3
• google-maps-markers
• dom-events

Share Improve this question Follow edited Jul 8, 2019 at 22:31 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 20, 2011 at 20:01 AtomicCharlesAtomicCharles 11111 gold badge33 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

The map click event will return the position of the mouse click.

Update: To erase the old marker when a new one is added you need to store an instance of the marker outside of the listener scope then you can erase it at the beginning of the listener event.

var singleMarker;

google.maps.event.addListener(map, 'click', function(event) {

    //if marker exists, erase marker
    if(singleMarker){
        singleMarker.setMap(null);
    }

    singleMarker = new google.maps.Marker({
        position: event.latLng, //mouse click position
        map: map,
        draggable: true,
        icon: "http://www.google./mapfiles/marker_green.png"
    });
});

Updated fiddle example.

You could use a

google.maps.event.addListener(map,'click', function()...

to add an onclick event to the map object. Here's a reference: http://code.google./apis/maps/documentation/javascript/reference.html#Map

You could also use the Google Maps Drawing Tools library: http://code.google./apis/maps/documentation/javascript/overlays.html#drawing_tools