I’ve recently spent a bit of contributing to the <google-map> element which leverages Polymer to help developers quickly integrate Google Maps into a website without having to jump through all the hoops of learning the V3 JavaScript API.

One of the main challenges I faced when getting started contributing to the element was trying to figure out the environment and workflow for development.  I’m use to working with Ruby on Rails where I have my trusty ./script rails s command or a Makefile to build an executable but these custom elements are just a collection of HTML, JS, and CSS files loosely organized in a directory with some dependency management stuff.  Here’s my quick guide to get starting developing the google-map element, or really any custom element with Polymer.

1. Make a new directory to contain your Polymer development:  mkdir polymer-dev; cd polymer-dev
2. Clone the repo you want into that new directory.  If you’ve forked the repo, you’ll probably want to git clone your copy here: git clone https://github.com/PolymerLabs/google-map.git
3. Head into the cloned repo and create a .bowerrc file with the following contents:

   {
   "directory": "../"
   }

4. Use bower to install all the dependencies specified in the element: bower install
5. Head out of the custom element’s directory back into the development space: cd ..
6. Start a static web server.  I use the default Python server, but you can use anything that serves static files: python -m SimpleHTTPServer
7. Presto!  Head to http://localhost:8000/google-map/demo.html to enjoy the element.

By default, Polymer elements seem to reference external dependencies as living just above the element, so google-map.html is looking for polymer via a path like “../polymer/polymer.html”.  The .bowerrc file that we setup tells bower to install all the dependencies one level higher which lets everything resolve correctly.

If you’re making changes across multiple elements / resources you can always manually remove a dependency that bower installed in your polymer-dev directory and replace it with a git clone of your own fork to start making changes.  As an example, if I’m making a change that straddles both google-map and google-apis I remove the default google-apis that bower install pulls for me with a fork of my own.