Thank you! Your feedback has been delivered
Thank you! Your feedback has been sent

Google Maps (v3 API) – toggle markers/checkboxes

I am building a map using Google Maps v3 API, and I am at the stage where I need to add a filter/toggle for the markers using a checkbox or similar.

My markers and content are set up using a simple for/while loop for each marker, but I need to attribute two things to these markers.

  1. A category (project, news etc)
  2. A date (recent, April, March, archive)

I can get the data for each marker and apply it no problem, but I'm having a few issues.

  1. Where do I add this information to the marker for it then to be filterable? I am using this HTML for each marker (I use Django): <div class="marker" data-lat="{{pin.position.latitude}}" data-lng="{{pin.position.longitude}}"></div>
  2. How do I then set up a toggle/filter checkbox for two areas: category and date?

Attached is a screenshot of my wanted output, and a JSFiddle of my current position here: http://jsfiddle.net/72C6g/

If you can help, please stick to my code setup as much as you can.

Thanks, R

Desired output

User Gravatar

user-1043706

Posted Jun 9 2014 15:52 UTC

$50


  • Assigned To omab
  • Solved
  • javascript
    jquery
    django
  • 20482 Views

8 Replies


Okay, so here's the deal... Google Maps API does not have anything native built in for filtering, both functionality and "checkboxes", this will all have to be done custom using available features.

With that said, it's definitely possible, but you need to decide on how you plan on moving forward with doing this.

If you want it exactly as above, you will need to create separate divs inside the map canvas with specific CSS positioning to show up correctly.

You then would need to use the API to attach an event on the DOM google.maps.event.addDomListener for when someone clicks on the checkbox it filters out the markers. You will have to decide how to handle it from there, do you clear all of the markers and add back only what is checked, or just remove the ones that were unchecked, etc.

There is nothing to "add to the marker to make it filterable", like it's not as easy as just adding 'filter-class' to classes or something like that.

What I would do in that instance, is create an object in the DOM with all of the markers, then set a data attribute of the marker data-markergroup equal to the group the marker is in, then using the event when the checkbox is unchecked just clear those markers.

This will require moderate to advanced jquery/javascript work to handle, unless you go with a plugin or something else out there that's already written.


Here's some code I wrote for a DOT project to load markers using the API, but it does not have any filtering. You should however be able to get an idea of how to create an object/array to be able to reference the markers:

https://github.com/tripflex/d3-js/blob/master/markersv2.js

Here's some site's I found while looking to see if there was a native filtering for the API:

https://sites.google.com/site/scriptsexamples/available-web-apps/awesome-tables/google-maps

https://www.youtube.com/watch?v=cQWaJqewXLw

http://www.kaasogmulvad.dk/unv/skup14/skoler-checkbox.html

User Gravatar

tripflex

Posted Jun 9 2014 17:03 UTC

Google Maps doesn't have any filtering capabilities but you can easily toggle the markers in a map by setting the related map.

I've forked your fiddle and updated the code with a few simple filers, check it here http://jsfiddle.net/omab/q99g7/1/.

User Gravatar

omab

Posted Jun 9 2014 17:42 UTC

Solution

This didn't solve your task? Get your own custom solution.

Hi,

You can set the category and time like so:

    var marker = new google.maps.Marker({
        //icon: siteURL + '/icon.svg',
        position: latlng,
        map: map,
        category: 'apple'
    });

can filter like so:

    var filteredResult = map.markers.filter(function(obj) {
        return (obj.category == "apple")
    });

Then set all markers visibility to false and then iterate the filteredResult and set visibility true:

marker.setVisible(true);
User Gravatar

rashidul04

Posted Jun 9 2014 18:07 UTC

or you can filter like so

    $.each(map.markers, function(i, marker) {
        // replace apple with particular category
        if(marker.category !== 'apple')
            marker.visible = false;
        else
            marker.visible = true;
    });

that's simple. in this case you don't need above filteredResult functionality and you don't need to draw map every time.

User Gravatar

rashidul04

Posted Jun 9 2014 18:25 UTC

Thanks @omab for the solution. One quick question... could one marker have multiple categories or dates? This would be great if it's worked into your answer.

<div class="marker" data-type="project events news" data-date="201401 201402 201403" data-lat="51.56" data-lng="-0.2321240234375"></div>
User Gravatar

user-1043706

Posted Jun 10 2014 2:50 UTC

@rdck, you can have many dates and types, just follow a well know data format that you can transform to a list, for example I've updated the fiddle to support them http://jsfiddle.net/omab/q99g7/2/. In that last change I'm converting the values to lists with a simple string split by spaces (I need to call toString() first because the .data() will interpret the value as JSON and transform the numbers).

User Gravatar

omab

Posted Jun 10 2014 8:40 UTC

@rdck Did you ever get the toggle up and running on a live/public website? Looking to extend this functionality for a simple map viewer using 9 different GeoJson datasets. Thanks, Chris Cpollard@dvrpc.org

User Gravatar

crvanpollard

Posted Oct 28 2014 7:12 UTC

@crvanpollard Yep, you can see it in action here > http://www.arca-projects.com

User Gravatar

user-1043706

Posted Oct 28 2014 7:15 UTC

Add a reply

By posting a reply on CodersClan you agree to our Terms & Conditions