For about a year now I’ve had a Google map on HeroPress.com showing pins of where my contributors are from. I’ve been using Maps Builder Pro from WordImpress. It’s an excellent plugin, and does many of the things I wanted, but not all of them. Here’s what I was after:
My contributors are a custom content type in WordPress, not just authors. Maps Builder Pro provides a search box in the admin of each contributor to search for a location on Google Maps. Then I simply click the location and it fills in a bunch of meta boxes with data like coordinates, city name, and some unique location data.
I wanted a plugin that would automatically go get all that data, organize people by location, grouping people who are from the same location, and put in one pin per location, with the bubbles showing all the people from that location.
The map I made with Maps Builder Pro let me do most of this, but manually. I had to keep the map up to date each week, and I was terrible at that.
So I wanted a new plugin, but I dearly love the admin UI for gathering and storing data that Maps Builder Pro provides. So that plugin remains, and I’ll use it that way. I built a new plugin for rendering the map with my requirements.
What I learned
I started with a tutorial by a guy named Ian Wright. It’s excellent, as are all of his maps tutorials. I highly recommend them.
Data Organization
The pins and the contents of the pins are two different data sets in Javascript, and they’re related by order. So pin 1 pairs with content block 1, and pin 42 goes with content block 42. This means you need to have a content block for every pin, even if it’s empty, so that the 42’s match up properly.
Bounding
Ian’s tutorial uses bounding to set the zoom and center for the map. I didn’t understand that, so when I tried to change it, I failed terribly. Here’s what that all means.
When creating a pin we put in
bounds.extend(position);which tells the map object the bounds of the pins on a map. Then we put in
map.fitBounds(bounds);which tells the map to zoom just the right amount so you can see all the pins, and center on the middle of them. This made it so that when I later tried to make a different center with setCenter() it didn’t work.
Additionally, when I removed the fitBounds() function the whole map broke. This is because you MUST use some sort of centering code, and I had neither fitBounds() nor setCenter().
The key was to have a setCenter() and NOT have a fitBounds(). Then I was able to easily have a setZoom as well.
Static Maps
I just found out that you can have the maps API return an image rather than an interactive map. So you can programmatically make the map, but it loads as fast as an image. If you don’t need interactivity then it’s a MUCH better way to go. I’m thinking of putting a small map on each contributor’s page with a single pin, showing where they’re from. It would then link to a google map.
In Summary
I’ve heard a fair number of people whine about how terrible the Google Maps API is, but I really like it. I don’t know Javascript, and I was able to easily adapt some tutorial code, read the docs to extend it, and make something really slick. I really recommend it.
