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.
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
which tells the map object the bounds of the pins on a map. Then we put in
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.
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.
The post Building a custom Google Map appeared first on As it were....