Adding multiple addListener events to a Google Map form with geocoding

Question

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 autocomplete = new google.maps.places.Autocomplete(input);

    autocomplete.bindTo('bounds', map);

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

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

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



      var address = '';
      if (place.address_components) {
        address = [(place.address_components[0] &&
                    place.address_components[0].short_name || ''),
                   (place.address_components[1] &&
                    place.address_components[1].short_name || ''),
                   (place.address_components[2] &&
                    place.address_components[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.com/mapfiles/marker_green.png";
      marker1.setIcon(image);
      marker1.setPosition(new google.maps.LatLng(40.7,-74.0));
    map.addOverlay(marker1);
});

</script>

Solution 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.com/mapfiles/marker_green.png"
    });
});

Updated fiddle example.

Solution 2

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.com/apis/maps/documentation/javascript/reference.html#Map

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

Comments

[AtomicCharles]

Thanks Mano. I just changed google.maps.event.addListener(marker1, 'click', function() {... to google.maps.event.addListener(map, 'click', function() {... A click is still not triggering the function though. Do you think it has to do with how I'm loading my initialize() function?

[AtomicCharles]

Thanks Brian! This works great. The only problem is it adds a new marker without removing the old one every click. How would I remove the last marker when I add a new one? (I tried just adding marker1.setMap(null) but this doesn't let me add a new marker)

[AtomicCharles]

Thanks Bryan! Works perfectly

[kayakpim]

AtomicCharles - did you fix this? I have a feeling I'm getting the same problem?