Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

removing previous marker before adding new marker in google maps

I have below code to display marker in the place that I click on map. Its working perfectly and the thing is I want to remove the previous map marker when adding new marker. Where I should make changes to work perfectly.

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

                    latLng = e.latLng;

                    console.log(e.latLng.lat());
                    console.log(e.latLng.lng());

                    image = clientURL + "/common/images/markers/red.png";
                    console.log("Marker");
                    marker = new google.maps.Marker({
                        position: latLng,
                        map: map,
                        icon: image
                    });


                });

I refered many links that was not working for my case To remove previous markers before adding new Markers

like image 801
Karthikeyan Pandian Avatar asked Mar 15 '16 11:03

Karthikeyan Pandian


People also ask

Can you remove markers from Google Maps?

Click the marker to reveal the editing options. Click the "Delete" link in the lower-left corner of the dialog box.

How do you change markers on Google Maps?

Click or tap on the marker to see information about it in a pop-up box, including an Edit option. Click or tap on the Edit option to open a small box with different sections labeled Title and Description as well as a marker icon. To edit the marker color, click or tap on the marker icon.


2 Answers

Add code to remove the marker from the map if it exists and has a .setMap method (assumes the existing marker is available in the current scope or is global):

if (marker && marker.setMap) {
    marker.setMap(null);
}

complete function:

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

  latLng = e.latLng;

  console.log(e.latLng.lat());
  console.log(e.latLng.lng());

  image = clientURL + "/common/images/markers/red.png";
  console.log("Marker");
  // if marker exists and has a .setMap method, hide it
  if (marker && marker.setMap) {
    marker.setMap(null);
  }
  marker = new google.maps.Marker({
    position: latLng,
    map: map,
   icon: image
  });
});

proof of concept fiddle

code snippet:

var geocoder;
var map;
var marker;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  google.maps.event.addListener(map, "click", function(e) {

    latLng = e.latLng;

    console.log(e.latLng.lat());
    console.log(e.latLng.lng());

    console.log("Marker");
    // if marker exists and has a .setMap method, hide it
    if (marker && marker.setMap) {
      marker.setMap(null);
    }
    marker = new google.maps.Marker({
      position: latLng,
      map: map
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
like image 115
geocodezip Avatar answered Sep 21 '22 19:09

geocodezip


Similar to the answer you linked in your question you need to maintain a global reference to the last marker added to the map (the previous marker to be removed).

var map;
var previousMarker; // global variable to store previous marker
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -34.397,
      lng: 150.644
    },
    zoom: 8
  });
  map.addListener('click', function(e) {
      // if the previousMarker exists, remove it
      if (previousMarker)
        previousMarker.setMap(null);

      latLng = e.latLng;

      console.log(e.latLng.lat());
      console.log(e.latLng.lng());

      //image = clientURL + "/common/images/markers/red.png";
      console.log("Marker");
      previousMarker = new google.maps.Marker({
        position: latLng,
        map: map
      });
    }

  );
}
like image 33
bwegs Avatar answered Sep 21 '22 19:09

bwegs