CODEWITHSUNDEEP
jquery-gmap3
akira
akira

Reputation: 193

Google maps markers Filter

i have a huge list of stores with addresses (longitude and latitude and codeclient ....). For each stores, a marker appears on the Google Map on the page. my problem is, users must be able to filter these markers depending on one thing: CodeClient. So to be more specific. If the user sets the CodeClient in the input slider it is supposed to only show the client (the owner of the CodeClient who we put in the slider) Like this ; CodeClient = 12345 , so when we put the number 12345 in the the input slider , and click on the button it should display only the marker of this client , i mean the markers who refer to the place of this client.

Upvotes: -1

Views: 1587

Answers (3)

akira
akira

Reputation: 193

the problem is solved by xomena , this is the path for the solution

Filter Google maps markers with input sliders based on one variable

Upvotes: 2

MrUpsidown
MrUpsidown

Reputation: 22489

You are setting a title to your markers with this CodeClient and you are pushing your markers in an array. So what's the big issue here? Simply loop through your array and set the marker visibility based on the title (CodeClient).

for (var i=0; i<markerArray.length; i++) {

  if (markerArray[i].title == '12345') {

    markerArray[i].setMap(map);
  } else {

    markerArray[i].setMap(null);
  }
}

Upvotes: 0

uncleoptimus
uncleoptimus

Reputation: 380

Seems like you are partially asking about setting marker visibility? As touched on in this Stack post (among others)

Google Maps API Marker Visibility

Most likely, marker.setVisible(true/false) is the way to go.

And then basically you would be doing that in the change event handler for the slider input.

One idea is loop over the markers array and toggle it invisible while setting the marker matching selected coce-client visible.

Another idea is to make it a "marker dictionary" where the keys are the code client value, i.e.:

markers = {
  12345: SomeMarkerInstance,
  67890: SomeOtherMarkerInstance,
  // ... etc
}

selectedMarker = '12345'

and in that way you could quickly just toggle off visibility on the current selected marker while toggling on the newly selected marker. The rest of the markers would be by default not visible.

I.e. (pseudo codey)

function someEventHandler (event) {
  markers[selectedMarker].setVisible(false)
  markers[selectedCodeClientValue].setVisible(true)
  // and perhaps other stuff, e.g. recenter the map, etc
}

Upvotes: 0

Related Questions