Create Google Map markers on fly

Question

I'm Using Google Maps API, I have create page where the user search the address and the Marker pops-up on the location its all good but what I really want to do is generate markers when the user clicks anywhere on the map programtically.

JSFiddle

Answer 1

The following adds a click handler to the map, which adds a new marker based on the lat/long.

It then attaches a right-click handler to that marker, which removes it from the map:

google.maps.event.addListener(map, 'click', function(e) {
  var marker = new google.maps.Marker({
    position: e.latLng,
    map: map
  });

  google.maps.event.addListener(marker, 'rightclick', function(e) {
    this.setMap(null);
  });
});

function initialize() {

  var placeSearch, autocomplete;
  var componentForm = {
    street_number: 'long_name',
    route: 'long_name',
    locality: 'long_name',
    administrative_area_level_1: 'long_name',
    country: 'long_name',
    postal_code: 'long_name'
  };

  var mapOptions = {
    center: new google.maps.LatLng(41.877461, -87.638085),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    disableDefaultUI: true,
    streetViewControl: false,
    panControl: false
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  var input = /** @type {HTMLInputElement} */
    (
      document.getElementById('field_autocomplete'));

  var autocomplete = new google.maps.places.Autocomplete(input);
  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();

  var marker = new google.maps.Marker({
    map: map,
    anchorPoint: new google.maps.Point(0, -29)
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);

    var place = autocomplete.getPlace();

    if (!place.geometry) {
      window.alert("Autocomplete's returned place contains no geometry");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(12); // Why 17? Because it looks good.
    }
    marker.setIcon( /** @type {google.maps.Icon} */ ({
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(25, 34),
      scaledSize: new google.maps.Size(50, 50)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

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

    infowindow.setContent('<div id="infowindow"><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    fillInAddress();
  });

  function fillInAddress() {
    // Get the place details from the autocomplete object.
    var place = autocomplete.getPlace();

    document.getElementById("field_latitude").value = place.geometry.location.lat();
    document.getElementById("field_longitude").value = place.geometry.location.lng();

    var formatted_address = place.formatted_address;

    document.getElementById("field_formatted_address").value = formatted_address;
    //alert(formatted_address);

    document.getElementById("field_street_number").value = place.address_components[0].long_name;
    //alert(place.address_components[0].long_name);
    document.getElementById("field_route").value = place.address_components[1].long_name;
    //alert(place.address_components[1].long_name);
    document.getElementById("field_locality").value = place.address_components[2].long_name;
    //alert(place.address_components[2].long_name);
    document.getElementById("field_administrative_area_level_1").value = place.address_components[3].long_name;
    //alert(place.address_components[3].long_name);
    document.getElementById("field_postal_code").value = place.address_components[4].long_name;
    //alert(place.address_components[4].long_name);
    document.getElementById("field_country").value = place.address_components[5].long_name;
    //alert(place.address_components[5].long_name);

    for (var component in componentForm) {
      document.getElementById(component).value = '';
      document.getElementById(component).disabled = false;
    }

    // Get each component of the address from the place details
    // and fill the corresponding field on the form.
    for (var i = 0; i < place.address_components.length; i++) {
      var addressType = place.address_components[i].types[0];
      if (componentForm[addressType]) {
        var val = place.address_components[i][componentForm[addressType]];
        document.getElementById(addressType).value = val;
      }
    }
  }

  google.maps.event.addListener(map, 'click', function(e) {
    var marker = new google.maps.Marker({
      position: e.latLng,
      map: map
    });
    
    google.maps.event.addListener(marker, 'rightclick', function(e) {
      this.setMap(null);
    });
  });

  // Bias the autocomplete object to the user's geographical location,
  // as supplied by the browser's 'navigator.geolocation' object.
  function geolocate() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        document.getElementById('field_street_number').value = place.address_components[0].long_name;
        document.getElementById('field_route').value = place.address_components[1].long_name;
        document.getElementById('field_locality').value = place.address_components[2].long_name;
        document.getElementById('field_administrative_area_level_1').value = place.address_components[3].long_name;
        document.getElementById('field_postal_code').value = place.address_components[4].long_name;
        document.getElementById('field_country').value = place.address_components[5].long_name;
        document.getElementById('field_latitude').value = place.geometry.location.lat();
        document.getElementById('field_longitude').value = place.geometry.location.lng();
        var geolocation = new google.maps.LatLng(
          position.coords.latitude, position.coords.longitude);

        var latitude = position.coords.latitude;
        var longitude = position.coords.longitude;

        document.getElementById('field_latitude').value = latitude;
        document.getElementById('field_longitude').value = longitude;

        autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
      });
    }
  }

}
initialize();

body {
  background: #B04D4F;
}
.frame {
  padding-top: 25px;
}
input[type="text"] {
  height: 40px;
  padding: 5px 10px;
  width: 100%;
  margin-bottom: 10px;
  border: 2px solid #fff;
  color: #1c1c1c;
}
label {
  color: #fff;
}
#map_canvas {
  width: 100%;
  height: 300px;
  margin: 0px 0;
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<div id="map_canvas"></div>
<div class="container frame">
  <div id="locationField">
    <label for="field_autocomplete">Autocomplete Search</label>
    <input id="field_autocomplete" name="field_autocomplete" type="text" placeholder="Location Search" onFocus="geolocate()" />
    <div class="row">
      <div class="col-sm-4">
        <label for="field_street_number">Street Number</label>
        <input id="field_street_number" type="text" />
      </div>
      <div class="col-sm-4">
        <label for="field_route">Route</label>
        <input id="field_route" type="text" />
      </div>
      <div class="col-sm-4">
        <label for="field_locality">City</label>
        <input id="field_locality" type="text" />
      </div>
    </div>
    <div class="row">
      <div class="col-sm-4">
        <label for="field_administrative_area_level_1">State</label>
        <input id="field_administrative_area_level_1" type="text" />
      </div>
      <div class="col-sm-4">
        <label for="field_postal_code">Zipcode</label>
        <input id="field_postal_code" type="text" />
      </div>
      <div class="col-sm-4">
        <label for="field_country">Country</label>
        <input id="field_country" type="text" />
      </div>
    </div>
    <div class="row">
      <div class="col-sm-6">
        <label for="field_latitude">Latitude</label>
        <input id="field_latitude" type="text" />
      </div>
      <div class="col-sm-6">
        <label for="field_longitude">Longitude</label>
        <input id="field_longitude" type="text" />
      </div>
      <div class="col-sm-12">
        <label for="field_formatted_address">Formatted Address</label>
        <input type="text" id="field_formatted_address" />
      </div>
    </div>
  </div>