We’re always interested to hear how you’re using the Maps APIs, so let us know if you’ve got something cool to show by tagging +Google Maps API on your posts (or comment right here!). For technical questions that aren’t answered in the developer documentation, check out the Google Maps developer community on Stack Overflow. Don’t forget to tell us what you’d like to see in the next release using the Google Maps API issue tracker.

Posted by Daniel Schramm, Associate Product Manager, Google Maps Mobile APIs

Positioning the overlay on the map 
The MapView has two child views. The DOM element for a custom overlay actually needs to reside inside the markup generated by Google Maps, but the overlay is an Ember.View so the MapOverlayView is actually rendered as a sibling of the MapCanvas and then moved into the correct spot later.



Keep the overlay centered while panning 
The default behavior for a custom overlay is to re-calculate the styles when the map is panned, but to build an overlay that stays centered on the map, the overlay should only be drawn once and then pan with the map.

Creating the overlay 
Finally, once the overlay has been created and rendered, resolve a promise letting the application know the map is ready.



Final Thoughts 
This project was extremely fun and was successful due to the collaboration between design and development. The Google Maps API gave us the creative freedom to completely customize the map, while Custom Overlays really pulled the experience together.

Posted by Monica Tran, Google Maps API Marketing

Adam and Abby Putinski are a husband and wife design/dev team located in San Francisco. Learn more about their work at abbyputinski.com