Take the 2-minute tour ×

I'd like to limit the number of markers that appear on the map in the right hand panel to something like 10 at any zoom level.

How can this be achieved?

The library can and examples can be found here:


I am following the code example given here:


There is a code reference here:


But it's still not clear to me exactly how I can customise the example I am following so that it only shows a maximum of 10 markers at any one time.

EDIT : Why I want to do this

I sell a product wholesale to many salons. With this map I am trying to show customers which salons they can go to buy the products I supply.

However in the example given by google, the full list of salons appear as markers on the map. This is not good because it is then possible for competitors to glean an entire list of salons that they can market competing products to.

The solution I'd like would be to only show a maximum of 10 markers at a time according whichever is closest to the inputted address.

share|improve this question
Code? Link to the library you are referring to? Example? –  geocodezip Jan 23 at 22:07
@geocodezip Sorry about that, I have added some links to code and a little more detail. –  Lucas Scholten Jan 24 at 11:07
add comment

2 Answers

For me the example( http://storelocator.googlecode.com/git/examples/panel.html ) always show only up to 10 entries in the panel. There is a hardcoded limit of 10 , so it's not possible to achieve it without modifying the store-locator.min.js

But when you wan't to display less than the 10 entries, it would be possible via CSS:

/* limit the displayed entries to 5 */
.store-list li:nth-child(n+6){display:none}

When you want to apply a higher limit(or when it should be compatible with IE<9) edit this part in store-locator.min.js(line 28)


(set the 10 to the desired value)

To limit the number of results at all edit this line in MedicareDataSource.prototype.parse_

for (var i = 1, row; row = rows[i]; i++) 

and set it to

for (var i = 1, row; row = rows[i],i<XXX; i++)

(where XXX is the limit +1, so e.g. setting XXX to 11 will apply a limit of 10)

share|improve this answer
Thanks, but I want to limit the number of markers on the actual map, not the number of entries listed in the left hand panel. –  Lucas Scholten Jan 24 at 12:43
see my edited answer –  Dr.Molle Jan 24 at 13:12
Thanks again, I really appreciate your help, but this only loads a maximum of 10 markers initially. I need to be able to show a maximum of 10 markers that are closest to the input address. I have updated my question to make this clearer. –  Lucas Scholten Jan 24 at 14:28
add comment

There's a few general approaches, and the better solution depends a bit on your total number of stores you have, and how hard you want to make it for someone to scrape.

You could continue to use the static data feed like in this example (which means sending all stores to the browser on load), and then add some logic to only display the closest 10 (such as setting the map to null for all markers that aren't also shown in the panel), but this is not a good solution if:

  • there are lots of stores (more than a thousand or so) since it will be unnecessarily slow to load them all when only displaying a few.
  • you don't want someone to look at your code and just grab the full CSV you're sending down the wire with all your data.

Given your scraping concern, a better method is probably to implement the store locator using a dynamic datasource that only returns the closest N records for a given lat/lng so you don't expose the entire thing at once. Using Google services you could use Maps Engine which has an API, and the store locator includes a Google Maps Engine example you could start with. Your security concern here is if these queries are publicly available for anyone to hit directly, the table is also public and then someone could query for the full table. So you'd want to put a proxy inbetween to avoid that type of query hack (although of course someone could just feed you lots of locations to eventually get all your stores if they really wanted).

Other options (again just looking at Google's stack although there are lots of alternatives for this kind of thing, like CartoDB and many more) include AppEngine's Search API which also returns the N closest items (but would require some server side coding which Maps Engine would not), or even put the data into Google spreadsheets and implement a basic Script -> Web Service, where your script takes the lat/lng and do some basic math to find the closest.

Again if you don't love the server side aspect then Maps Engine is probably your best bet for a quick start especially given there's a working sample in the storelocator code.

share|improve this answer
Thanks. I don't need to bulletproof it from scraping. We have about 300 markers. Your first solution sounds like it could work. Can you give a code sample. I'm basically pretty rubbish with javascript. Sorry for asking, I appreciate your help very much. –  Lucas Scholten Feb 5 at 22:55
add comment

Your Answer


