Remove A Marker From Google Maps Javascript

Question

I'm trying to create a list, which is left of the map. Cities and countries will be listed when users search on the map.

I appended on the list area correctly when i search somewhere but when i try to remove a marker from map by clicking minus icon in the list area and getting index of list item and trying to remove from markers array by index.

If begin to remove markers by clicking last item of list it runs correctly but when i click first item of the list it removes all markers from map it console logs (Uncaught TypeError: Cannot read property 'setMap' of undefined)

https://jsfiddle.net/tolga748/op9u3ryv/

        $(".list-area ul").append("<li><div class='list-area-left'><span> " + place.adr_address + "</span></div><div class='list-area-right'><a href='#''><img src='http://iconshow.me/media/images/ui/ios7-icons/png/512/minus-outline.png' width='25'></a></div></li>");


        var killer;

        $(".list-area ul").on("click", "li", function() { 

          killer = $(this).index();

          $(this).fadeOut(700, function () {
            $(this).remove();
          });

          markers[killer].setMap(null);

          markers.splice(killer, 1);

          console.log(markers);

        });

Answer 1

You have placed the click listener to list in "for each". Each time for each function call those many time click listener get added and also each time "places_changed" get called your adding the click listener to list

Remove the click listener out side the for each and "places_changed" listener.

working fiddle https://jsfiddle.net/v7jL0e9p/

function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 41, lng: 29 },
          zoom: 6,
          mapTypeId: 'roadmap'
        });

        // Create the search box and link it to the UI element.
        var input = document.getElementById('pac-input');
        var searchBox = new google.maps.places.SearchBox(input);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

        // Bias the SearchBox results towards current map's viewport.
        map.addListener('bounds_changed', function() {
          searchBox.setBounds(map.getBounds());
        });

        var markers = [];
        // Listen for the event fired when the user selects a prediction and retrieve
        // more details for that place.
        searchBox.addListener('places_changed', function() {
          var places = searchBox.getPlaces();

          if (places.length == 0) {
            return;
          }

          // Clear out the old markers.
          // markers.forEach(function(marker) {
          //   marker.setMap(null);
          // });
          // markers = [];

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            if (!place.geometry) {
              console.log("Returned place contains no geometry");
              return;
            }
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));



            $(".list-area ul").append("<li><div class='list-area-left'><span> " + place.adr_address + "</span></div><div class='list-area-right'><a href='#''><img src='http://iconshow.me/media/images/ui/ios7-icons/png/512/minus-outline.png' width='25'></a></div></li>");






            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });


          map.fitBounds(bounds);
        });
        var killer;
         $(".list-area ul").on("click", "li", function() {

              killer = $(this).index();

              $(this).fadeOut(700, function () {
                $(this).remove();
              });

              markers[killer].setMap(null);

              markers.splice(killer, 1);

              console.log(markers);

            });
      }