jQuery Ui Map - Use gmap method more than one time

Question

I am working on Map filtering and I am using jQuery Ui Map plugin. And for filtering, I am using below code :

$('#map_canvas').gmap({ 'center':new google.maps.LatLng(43.730531,-79.416927), 'callback': function() {

    $.getJSON( 'path to json', 'category=activity', function(data) { 

        $.each( data.markers, function(i, m) {

            $('#map_canvas').gmap('addMarker', { 'tag': [m.area], 'position': new google.maps.LatLng(m.latitude, m.longitude), 'center': new google.maps.LatLng(m.latitude, m.longitude), 'bounds': true } )

            .click(function() { $('#map_canvas').gmap('openInfoWindow', { 'content': m.content }, this); });


        });
    });

    $("#some").change(function() {
                            var bounds = new google.maps.LatLngBounds();
                            var tag = $(this).val();
                            if ( tag == '*' ) {
                                $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                    marker.setVisible(true); 
                                    bounds.extend(marker.position);
                                    marker.map.fitBounds(bounds);   
                                });
                            } else { 
                                $('#map_canvas').gmap('find', 'markers', { 'property': 'tag', 'value': tag }, function(marker, isFound) {
                                    if (isFound) {
                    marker.setVisible(true); 
                                        bounds.extend(marker.position);
                                        marker.map.fitBounds(bounds); 
                                    } else {  
                                        marker.setVisible(false);
                                    }
                                });
                            }
                            $('#map_canvas').gmap('option', 'center', bounds.getCenter());
                        });
                }
     });

So all the markers from the JSON will filter out as per the tag assigned in to select box.

But what I want to achieve is onClick of particular store name(which are listed just below the map), only that marker should show on Map.

For that I have tried to add marker with jQuery Ui Map. But I think we can't use .gmap more than one time.So I used other approach for that:

 $(".lstore").click(function() {

        var clat = $(this).attr('data-value-lat');
        var clng = $(this).attr('data-value-lng');
        var myLatlng = new google.maps.LatLng(clat,clng);
      var mapOptions = {
        zoom: 17,
        center: myLatlng
      }
      var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
       var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    });
    });

Its working as per my desired result.But the problem is that, by using above code, the filter that I have made using select box(whose code is at start of this question) is not working anymore(It works untill I don't click on any store name).

So I want to have filter is working as well as on click of store name, its marker should also show on Map.

Is there any alternative for that ? How can I achieve this ?

Answer 1

You do not have to load the map all over again. After onClick clear the markers and redraw map with just the selected store's marker on it.
Try this:
1) Clear markers:

// To remove the marker from the map
marker.setMap(null);

2) Then redraw map with the active marker.

// To add the marker to the map, call setMap();
marker.setMap(map);

PS: Please remove var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); from your click function. You do not need to reload the map. It is neither necessary in this case nor efficient in terms of performance.

Useful links & Examples here: https://developers.google.com/maps/documentation/javascript/markers#add