Posted:
A new version of Google Play services is currently rolling out to devices. You can start developing for it now using the latest Google Play services SDK along with the new Android 4.4 (KitKat) emulator. Read on to find out about the new features added for the Google Maps Android API v2.


Whether your app tracks ghost sightings, shows witch flight paths, or guides users to the nearest zombie-proof safehold, sometimes the best way to highlight important information is to de-emphasise some elements of your app. The new alpha property for Markers allows you to fade markers in and out as they become more or less important.

You can further tailor the map to your use case using the new setBuildingsEnabled() method to control the visibility of 3D buildings. This is especially useful when you want to highlight your own content. We’ve also made it possible to easily change ground overlay images with the new setImage() method.


Lastly, we’ve added an OnMapLoadedCallback callback interface to notify you when the map has finished rendering. The following example code shows how this callback can be combined with the snapshot feature to ensure the snapshot captures the fully rendered map:

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

Posted:
Author Photo

Fab Friday is back this week! We’re now fully into October. It’s a good time to stay indoors and code up some maps. To help you do that, we’ve got some videos you can use.

First off, for the iOS developers, I’ve got a new playlist, Getting Started with the Google Maps SDK for iOS. This goes into much greater detail than previous videos along the same lines, walking you through step by step. I cover:

  1. Setting up your development environment
  2. Getting and testing an API key
  3. Creating your first application

Here’s the playlist:


Next up, we have a Maps Live episode where Josh Livni and Felipe Hoffa give a glimpse into the future of air travel using Google Big Query and the Google Maps JavaScript API. Check out their video here:


That’s all for this week. Have a great weekend, and happy mapping!

Posted by Mano Marks, Maps Developer Relations Team

Posted:
We love the teamwork behind AbbyPutinski.com, designed by San Francisco illustrator Abby Putinski, and developed by her husband Adam. In this guest blog post, Adam will walk us through how he worked with Abby to give the map a unique, illustrated look, as well as fun-to-use animations.

Abby is a designer and illustrator living in San Francisco. In building her site, Abby wanted to take users on a journey to discover and explore some of her favorite places in San Francisco, in a way that reflected her illustration style. Taking Abby’s design direction into account, I began building the site, working with the Google Maps API to make the visual experience come to life for visitors of the site. The app is powered by Ember.js, so the application template includes a helper to render a MapView. Custom Overlays are used to take users on a journey around San Francisco.


Designing in Reverse 
To make the map feel like an illustration, Abby used the Styled Maps Wizard to play with colors of the map. By using very few colors and disabling most of the roads and landmarks, she was able to give the map a flat, simple look. After exporting the JSON from the Styled Maps Wizard, Abby worked with screenshots of the map to design the rest of the experience.

 
Some of Abby’s favorite landmarks in San Francisco



The animated GIF in situ on the map as a custom overlay.

Defining a custom overlay 
To create a fullscreen overlay, the bounds are set to the Southwest and Northeast corners.


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