Removing marker by latitude/longitude in google maps

Question

I have set of markers in my google map. And at the right side of my map I have list of places marked in the map. Now upon clicking the places the color of the pin/marker should be changed. For this I thought I would delete the marker with latitude and longitude(which I will get on clicking the places link) and place a new marker with new image. But I dont know how to delete a marker with latitude and longitude or by place. Please help.

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

I will be adding multiple markers to google map through google's autocomplete. And the places of the markers will be listed on the right side of the page. When the user clicks the places, it should replace the marker icon.

Answer 1

Instead of deleting and replacing, you could keep a reference to each marker that is associated with a place and just call setIcon on it passing the new setting. See documentation: https://developers.google.com/maps/documentation/javascript/reference#Marker

EDIT: New code in question.

Added markers array to contain the markers, used data attribute to hold marker id, pull markerid attribute value when link element click event is fired.

NOTE: Not tested, so it may be buggy.

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