Over a million developers have joined DZone.

Playframework, Twitter Bootstrap and Google Maps API

DZone's Guide to

Playframework, Twitter Bootstrap and Google Maps API

· Java Zone ·
Free Resource

Delivering modern software? Atomist automates your software delivery experience.

So, what did you do over the Christmas break? Presents, plenty of family time, kick back a little? I did all that and wrote a little web application as well. I thought I would share a little insight into how I got on.


A while back, I created a publicly shared google map so that anyone interested in Play framework could add themselves to the map. A decent number of people signed up, but it was a pain to maintain. There was no control over who could put what where. For example, someone could delete someone else’s pinpoint, change someone else’s details, or the most common issue, overwrite the play framework description and URL’s. So, I decided to create a web application that would allow the community to have a developer map, but without the issues of a simple shared google map.

The tools

Obviously, I used the Playframework, but additionally I decided to Bootstrap from Twitter. Bootstrap, if you haven’t used it yet, is a CSS base that offers a way to develop clean designs and neat interfaces. There are plenty of blogs already about how to use bootstrap, and the documentation itself is pretty complete, but suffice to say, it made the job of building the UI significantly easier. As I am not a naturally artistic person, Bootstrap has allowed me to build a UI I am proud of, without having to suffer for the cause. It fits in with the “just-works” approach of Play, it makes what should be simple, simple.

Secondly, I used Google Maps to render the maps and the icons on top of the maps. I have used Google Maps before, but decided to check out Bing Maps before making my final choice. Put simply, I found Google Maps to do everything I needed, with relative ease, and found no reason why Bing maps could be a better choice.

Quite simply, Play, Bootstrap and GoogleMaps work amazingly well together.


As most people tend to do, I decided to deploy the code onto Heroku. I have used Heroku a few times previously, and have had good experiences with it. I was tempted to try something else, due to the limit on the database size of the free account, but as I already have hosting elsewhere, I decided to just use the database on my paid-for hosting alongside Heroku as the application server. Even with this separation, the response times for the application are excellent. It has made me wonder whether there is a gap in the market for a low-end Database-as-a-Service facility to bridge the gap between the Heroku Postgres offerings.

I did have one issue with the deployment, which you may want to be aware of. My views were all lowercase HTML files, rather than camelCase, which was the case for my controller actions. On my Macbook Pro this made no difference, but as soon as I deployed to Heroku I started getting errors. It took me a while to figure this out, because the error logging wasn’t working ver well. Unfortunately I had already committed my code to the local git repository on my mac, which did not care about case differences, so I had to fight with a few git mv commands to move the files to uppercase equivalents. Other than that, the whole thing has worked out pretty well.

Next Steps

Well, its still in beta, so if you guys like it, and it starts to take off, expect more features to start appearing. What I am hoping for is for the word to spread, so that more and more people add themselves to the maps (why not start with the play framework map). Additionally, I would hope that people will create maps for other technologies that they are interested in.

If you have any thoughts or comments, please feel free to get in touch!


From http://playframework.wordpress.com/2012/01/02/playframework-twitter-bootstrap-and-google-maps-api/

Start automating your delivery right there on your own laptop, today! Get the open source Atomist Software Delivery Machine.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}