I’ve written a few articles on working with the Google Maps API – some simply based on the API itself, others within the context of WordPress.
Generally speaking, I’m not a huge fan of the API. Sure, it’s powerful and yes you can do a lot with the information Google makes available, but I’ve also found the initial learning curve of the API is kind of steep. Once you orient yourself with the basics, it’s not as bad to introduce new functionality, but there is something to initially getting started.
But I digress. That’s not what this post is all about. Instead, this post is meant to share how to solve a specific problem: Programmatically listing Google Maps markers when the map isn’t visible (say in a responsive website).
Listing Google Maps Markers
Here’s the setup for the problem:
- You have a custom implementation of Google Maps setup on your website or your web application.
- Users are able to search for locations using a specific zip code, city, or other local
- When the search completes, the maps centers itself based on the criteria and plots markers representing businesses nearby said search criteria
What you’d like to add, though, is a listing of information about each of the markers displayed in the map below. Using the Google Maps API, this isn’t too bad.
For example, you can use the
idle event of the map and the map’s bounds to grab a list of all of the markers that are displayed.
Before that, we need some simple marker in order to place the listing of our results. See this gist:
Now we can take advantage of the
idle event of the map as in this gist:
Given the code comments above, it should relatively easy to follow what’s happening within the code:
- Create unordered list in HTML we’ll use to populate with content from the marker.
- When the map is in an `idle` state, we’ll iterate through the markers in the bounded map.
- Take the content of the marker and then place it into a list item and append it to the unordered list. Notice we’re giving each list item a unique ID to prevent adding duplicates.
What happens, though, if you’re viewing a map on a mobile device, the map is hidden, and its bounds are essentially zero?
In this case, as far as I’m aware at the time of this writing, you have to do a little bit of work in order to force the map to quickly render so the markers are listed and then hide it.
Getting Markers When There’s No Map
I know, it sounds kind of cheap, but there’s no other part of the API I’ve been able to find since everything is based on the bounds of the map.
Before I walk through how to do this, note this code will be subject to the breakpoints you’ve defined. In the case of this code, I’m going to use a break point of 768 pixels in width. Your implementation may vary, but the code shouldn’t be all that different.
First, setup a DOM-ready handler using jQuery like in this code:
Notice in the code it checks to see if the width of the window is less than the defined breakpoint. If so, it forces a height and width of the map but it hides its visibility (settings its value to
display:none; will not allow us to access the bounds as per the API).
Notice also on the
resize event of the
window object, the size of the window is checked. If it’s greater than the breakpoint, then we display the map as usual.
We’ll also need to add one piece of code to the gist above forces us to hide the map once the markers have all been collected. The final version of the above code should look like this gist:
And that takes care of it: You’re able to take advantage of the markers displayed in a bounded map i a mobile view by showing results without actually having to display a map.
There may be other ways to implement this all of which I’m interested in hearing; however, at the time of this writing, this is the closest I was able to work with making something happen. If you’re aware of another way to go about doing this, let me know in the comments.