Удаление маркера по широте/долготе на картах Google

Question

У меня есть набор маркеров на моей карте google. И в правой части моей карты у меня есть список мест, отмеченных на карте. Теперь, щелкнув по местам, цвет шрифта/маркера должен быть изменен. Для этого я думал, что удалю маркер с широтой и долготой (который я нажму на ссылку на места) и поместил новый маркер с новым изображением. Но я не знаю, как удалить маркер с широтой и долготой или по месту. Пожалуйста помоги.

<script type='text/javascript'> 
$(document).ready(function() { 
    var map = null; 
    var infowindow = new google.maps.InfoWindow(); 
    function createMarker(place) { 

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

     var address = place.formatted_address; 



     marker.setPosition(place.geometry.location); 
     marker.setTitle(address); 
     marker.setVisible(true); 
     address = address + '<a href="#" class="link" title="Been there" alt="' + address + '">B</a>&nbsp;<a class="link" href="#" title="Want to go" alt="' + address + '">W</a>&nbsp;<a class="link" href="#" alt="' + address + '" title="Favourite">F</a>'; 
     $('#trip_location').append(address); 
     google.maps.event.addListener(marker, 'click', function(e) { 
      infowindow.setContent('<div><strong>' + marker.title + '</strong><br>'); 
      infowindow.open(map, marker); 
     }); 
     google.maps.event.trigger(marker, 'click'); 
    } 



    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.8688, 151.2195), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      infowindow.close(); 
      input.className = ''; 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
       // Inform the user that the place was not found and return. 
       input.className = 'notfound'; 
       return; 
      } 
      var location = place.geometry.location; 
      var address = place.formatted_address; 
      createMarker(place); 
     }); 
    } 

    $('#trip_location').on('click', '.link', function(e) { 

     e.preventDefault(); 
     var location = $(this).attr('alt'); 
    }); 


    $('.clear').click(function() { 
     $('#searchTextField').val(''); 
    }); 
    google.maps.event.addDomListener(window, 'load', initialize); 
}); 

Я буду добавлять несколько маркеров на карту Google через автозаполнение Google. И места маркеров будут указаны в правой части страницы. Когда пользователь нажимает на места, он должен заменить значок маркера.

Answer 1

Вместо удаления и замены вы можете сохранить ссылку на каждый маркер, связанный с местом, и просто позвонить setIcon, на котором передается новая настройка. См. Документацию: https://developers.google.com/maps/documentation/javascript/reference#Marker

EDIT: Новый код.

Добавлен массив маркеров, содержащий маркеры, используемый атрибут данных для хранения идентификатора маркера, вытащить значение атрибута markerid при запуске события щелчка элемента ссылки.

ПРИМЕЧАНИЕ: Не проверено, поэтому оно может быть неисправным.

$(document).ready(function() { 
    var map = null; 
    var markers = []; 
    var infowindow = new google.maps.InfoWindow(); 
    function createMarker(place) { 

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

     var address = place.formatted_address; 



     marker.setPosition(place.geometry.location); 
     marker.setTitle(address); 
     marker.setVisible(true); 

     markers.push(marker); 
     address = address + '<a href="#" class="link" title="Been there" alt="' + address + '" data-markerid='" + (markers.length - 1) + "'>B</a>&nbsp;<a class="link" href="#" title="Want to go" alt="' + address + '">W</a>&nbsp;<a class="link" href="#" alt="' + address + '" title="Favourite" data-markerid='" + (markers.length - 1) + "'>F</a>'; 


     $('#trip_location').append(address); 
     google.maps.event.addListener(marker, 'click', function(e) { 
      infowindow.setContent('<div><strong>' + marker.title + '</strong><br>'); 
      infowindow.open(map, marker); 
     }); 
     google.maps.event.trigger(marker, 'click'); 
    } 



    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(-33.8688, 151.2195), 
      zoom: 13, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById('map_canvas'), 
       mapOptions); 
     var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField')); 

     var autocomplete = new google.maps.places.Autocomplete(input); 
     autocomplete.bindTo('bounds', map); 
     google.maps.event.addListener(autocomplete, 'place_changed', function() { 
      infowindow.close(); 
      input.className = ''; 
      var place = autocomplete.getPlace(); 
      if (!place.geometry) { 
       // Inform the user that the place was not found and return. 
       input.className = 'notfound'; 
       return; 
      } 
      var location = place.geometry.location; 
      var address = place.formatted_address; 
      createMarker(place); 
     }); 
    } 

    $('#trip_location').on('click', '.link', function(e) { 

     e.preventDefault(); 
     var location = $(this).attr('alt'); 
     var markerid = $(this).data('markerid'); 
     var marker = markers[markerid]; 
    }); 


    $('.clear').click(function() { 
     $('#searchTextField').val(''); 
    }); 
    google.maps.event.addDomListener(window, 'load', initialize); 
});