GoogleMaps v3 API Create only 1 marker on click

var marker;

function placeMarker(location) {
  if ( marker ) {
    marker.setPosition(location);
  } else {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
  }
}

google.maps.event.addListener(map, 'click', function(event) {
  placeMarker(event.latLng);
});

You have to work on the same marker all the time - do not create new ones. Here you have a global variable marker and in placeMarker function you assign marker to this variable first time. Next time it checks that marker exists already and then just changes its position.

<div id="map" style="width:100%;height:500px;"></div>

<script>

    var marker;
    var infowindow;

    function myMap() {
        var mapCanvas = document.getElementById("map");
        var myCenter=new google.maps.LatLng(51.508742,-0.120850);
        var mapOptions = {
            center: myCenter, zoom: 18,
            mapTypeId:google.maps.MapTypeId.HYBRID
        };
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'click', function(event) {
            placeMarker(map, event.latLng);
        });
    }

    function placeMarker(map, location) {
        if (!marker || !marker.setPosition) {
            marker = new google.maps.Marker({
                position: location,
                map: map,
            });
        } else {
            marker.setPosition(location);
        }
        if (!!infowindow && !!infowindow.close) {
            infowindow.close();
        }
        infowindow = new google.maps.InfoWindow({
            content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng()
        });
        infowindow.open(map,marker);
    }


</script>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkG1aDqrbOk28PmyKjejDwWZhwEeLVJbA&callback=myMap"></script>

this works fine jsfiddle http://jsfiddle.net/incals/o7jwuz12

and this for complete code: https://github.com/Lavkushwaha/Google_Maps_API_Without_PHP_DOM/blob/master/single.html

Hello I stumbled upon the same problem and I came up with this answer before finding this post. So here is the answer:

add the eventListener inside the map initialize function:

function initialize() {
      ...
      google.maps.event.addListener(map, 'click', function(event) {
        addListing(event.latLng);
      });
}

then create a counter variable and use it inside addListing variable (my function to add the marker):

var i=0
function addListing(location) {
  var addMarker;
  var iMax=1;

  if(i<=iMax) {
      addMarker = new google.maps.Marker({
      draggable:false,
      position: location,
      map: map
  });

  google.maps.event.addListener(addMarker, 'dblclick', function() {
    addMarker.setMap(null);
    i=1;
  });

  i++;

  } else {
      console.log('you can only post' , i-1, 'markers');
      }
}

The other benefit of this approach( I think) is that you can control the amount of markers the user can place in the map easily by increasing or decreasing the max counter value (i.e. iMax=2 will increase the amount of allowed markers to 2). You erase the marker by double clicking it and you can re-place it in another location.

Hope it helps anyone in the future.
Cheers

GoogleMaps v3 API Create only 1 marker on click

Related

Recent Posts