Google Maps JavaScript API v3 isn’t packaged with default behaviour to attach a new google.maps.InfoWindow instance to each google.maps.Marker. Nor can you group markers in the same taxonomy together. I’ve made up for the lack of boilerplate by sorting out the categorization problem whilst internally taking care of event binding.

Features

  • Group one of more marker together
  • Assign custom icon for each category group
  • Toggle visibility for all markers in a category
  • Add category filter controls
  • Auto binds google.maps.Marker clicks to a managed google.maps.InfoWindow instance

Markers example

At its simplest:

this would be the JavaScript to get one marker to appear:

Note on GPS coordinates

Best case, you’re pulling location data from a relational database or consuming an API so you should have the lat/lng coordinates cached along with marker metadata. To perform lat/lng lookup callbacks for each marker during runtime, you would have to be are mental. If you’re implementing a solution using WordPress, Advanced Custom Fields Pro plugin has a Google Maps field that can lookup latitude, longitude, and the Google maps reference (i.e., a location’s fully-descriptive address most useful for a “Get Directions” link.)

Try it yourself

For further documentation, jump over to Google Maps Categorized Marks on GitHub and read source code of the restaurants example. It showcases map controls based on marker categories. I’ve made this available for people to customize their own web apps without having to re-implement logic for markers.

Feel free to contact me for help getting started or to report bugs.