Author photo

G’day and welcome to Fab Friday! It’s holiday time in many places around the world, and what better way to celebrate than to watch a series of videos. So kick back, relax, and snag some cool mapping skills.
Author photo

G’day and welcome to Fab Friday! It’s holiday time in many places around the world, and what better way to celebrate than to watch a series of videos. So kick back, relax, and snag some cool mapping skills.



Mano Marks presents an entire series in one go – four videos on getting started with the Google Maps JavaScript API. Here’s episode 1:





That rocks! Follow right along with the episodes 2, 3 and 4. Now you’re ready to map and roll.



See how to import data into Google Maps Engine with Josh Livni and Mark McDonald. Google Maps Engine (GME) provides an easy way to create and share maps, and to put data into the Google cloud. Josh and Mark walk through some Python examples, showing various ways to import vector and raster data into your GME account:





Tap the geospatial data in Freebase to put knowledge on your map. Freebase is a dataset of well-known facts about people, places, businesses, and other entities, derived from the web. Josh Livni and Ewa Gasperowicz show you how to query the Freebase API and get back information to put on a map:





Looking for some stylish color schemes for your maps? Want to simplify, hide, or highlight specific map features? Paul Saxman talks about Snazzy Maps by Atmist, a community-driven repository of map styles for Google Maps. Paul shows you how to add the custom map styles to your app using the Google Maps JavaScript API, and also how to contribute styles to Snazzy Maps yourself:





Ready for more shows from the Google Maps API team? Find them all at Google Developers Live.



Earlier today, we introduced a feature in the new Google Maps that enables you to embed a Google Map by copying and pasting an HTML snippet. Make sure you’re opted in, and then head over to Google Maps, click on the gear icon on the lower right, and give it a go.

Earlier today, we introduced a feature in the new Google Maps that enables you to embed a Google Map by copying and pasting an HTML snippet. Make sure you’re opted in, and then head over to Google Maps, click on the gear icon on the lower right, and give it a go.

Like the new Google Maps, embedded maps are now built for you. Your users can sign in to these maps to see relevant content, like their saved places from Google Maps. Conversely, they can also save a location from your embedded map for viewing on Google Maps for desktop or mobile.

To top it off, embedded maps are free of usage limits, so you don’t have to worry about quotas.

Finally, over the coming weeks we’ll be introducing a new ad experience we think is attractive for users of the new Google Maps embed. This new on-map design will allow relevant local businesses to connect with your users, similar to the ads you currently see in the new Google Maps and Google Maps for Mobile. As part of this release, we’ve also updated the Google Maps/Earth APIs Terms of Service to enable us to launch new APIs with advertising. Existing APIs and new APIs launched without advertising retain the requirement for Google to provide 90 days notice prior to including ads.

Happy embedding!

Author Photo




Author Photo


Hi everyone! Fab Friday is back. We went into a long hiatus since the last post back in October. A lot has been happening in the last few weeks, so I thought I’d jump back on and let you know about it all. We launched:







We also sunsetted the Google Maps API v2, our venerable Maps platform, and helped people migrate to v3.



And finally, Fab Friday isn’t complete without a video. This week we’ve got Mapping Big Data with Google's Cloud Platform, with Francesc Campoy Flores and Kurt Schwehr. Take a look:








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



Posted by Mano Marks, Maps Developer Relations team



While adding location-awareness to your application can bring tons of value and joy to your users, requiring them to type out full addresses or location queries often does the opposite. The Places API Autocomplete service, a feature of ...




While adding location-awareness to your application can bring tons of value and joy to your users, requiring them to type out full addresses or location queries often does the opposite. The Places API Autocomplete service, a feature of Google Places API and the Google Maps API v3’s Places Library, brings the same type-ahead-search technology from Google Maps to third party apps, helping you soothe some of your users’ address entry frustration.



To make autocomplete even more accurate and useful, we’re excited to announce an update that automatically biases predictions towards the user’s location based on the requester’s IP address. Now, results that are closer to the user will appear sooner in the API’s responses, saving users even more keystrokes and time. For a calendar app like Sunrise, where editing and adding locations quickly is important, this is a clear win for their users.







If you don’t want automatic location biasing via IP address, it can always be turned off by including other location biasing parameters in the autocomplete requests.



We’re also happy to announce our documentation now also includes a handy CSS guide to help developers add their own flair and style to the Autocomplete widgets.



With more accurate responses and customizability options, the Places API team is looking forward to more useful and beautiful autocomplete integrations. Please visit our developer documentation to learn more about the Places API. If you have technical questions, post them to the Google Maps API StackOverflow community, and if you have any feedback, please send it to us using the Google Maps API Issue Tracker.



Posted by Kevin Tran, Places API software engineer

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.
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:



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.

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

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. ...
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.



Overlay.prototype.onAdd = function() {
var panes = this.getPanes();
// Get a reference to the Ember View
var overlayView = Ember.View.views['map-overlay-view'];
// Set the overlay element to the view's element
this.div_ = overlayView.get('element');
// Detach the view's DOM element (currently a sibbling of the map canvas)
overlayView.$().detach();
// Insert the view's DOM element in the correct spot
panes.overlayLayer.appendChild(overlayView.get('element'));
};
view raw aapgist2.js hosted with ❤ by GitHub




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.



Overlay.prototype.draw = function() {
var overlay = this.div_;
var projection = this.getProjection();
var sw = projection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
var ne = projection.fromLatLngToDivPixel(this.bounds_.getNorthEast());
// Only draw the overlay once
if (!this.drawIsFinished) {
overlay.style.left = '%@px'.fmt(sw.x);
overlay.style.top = '%@px'.fmt(ne.y);
overlay.style.width = '%@px'.fmt(ne.x - sw.x);
overlay.style.height = '%@px'.fmt(sw.y - ne.y);
this.drawIsFinished = true;
this.options.didFinishDraw.call(this);
}
view raw aapgist3.js hosted with ❤ by GitHub







Creating the overlay 

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



var overlay = new Overlay({
didFinishDraw: function() {
_this.propertyWillChange('ready');
_this.get('ready').resolve();
_this.propertyDidChange('ready');
}
view raw aapgist4.js hosted with ❤ by GitHub




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




Author Photo













Author Photo
Last week Felipe and Michael from the Google Cloud Platform Developer Relations team released a video demonstrating the new Pearson correlation analysis available in Google BigQuery. Their example used more than 70 million flight records to find correlations on departure times, which could be used to predict whether your plane would be late. Specifically, you can find out which set of airports best predict your airport’s possible flight delays the following day.


As you can see from their code (watch the video for context), they’re using iPython Notebook to work with the BigQuery results, and matplotlib to get a quick visual of results. But one aspect that’s hard to see in these results is the spatial relationship of the airports. Maps to the rescue!


My goal was to create a simple visualization, where selecting any airport would highlight which airports you should look at to predict delays the next day. Using the Google Maps JavaScript API I went ahead and did just that:








To create this map, using the same code noted above, we first created a JSON dump of the correlations on departure time for each airport to each other airport. Then, using an article on visualizing earthquakes as a template, I modified the code so that we have a simple dictionary of all airports, keyed by their airport id. Last but not least, I added a function that gets called when an airport marker is clicked in order to restyle all the other airport markers according to their correlation. This method checks the selected season (winter, for example, has different correlations than spring), and highlights correlated markers by setting the color and scale of the circle symbol.


This week we are pleased to announce updates for the Google Maps Android API v2 and the Google Maps SDK for iOS. We’re listening to your feedback, adding features requests that you’ve starred more than 195 times on the ...
This week we are pleased to announce updates for the Google Maps Android API v2 and the Google Maps SDK for iOS. We’re listening to your feedback, adding features requests that you’ve starred more than 195 times on the issue tracker. This includes cross platform support for map padding, flat markers, and marker rotation, described in the video below:








Full screen maps with map padding

Want to add a translucent Action Bar overlay to your map in Android? Or use a full screen layout in iOS 7? Map padding makes it easy to create full screen maps with custom interface overlays. Google Maps UI controls and attribution will automatically be repositioned in the visible area, and changes to the map camera take padding into account, so you don’t need to do this yourself.








Full screen layout maps are more immersive on Android (left) and iOS 7 (right).



Give your markers a sense of direction

We’ve added a marker rotation property, to allow you to rotate a marker around it’s anchor point. The new flat property allows you make the marker lie flat on the map surface, rather than popping out to face the camera. These two new properties are especially useful for indicating compass directions when the map is rotated or tilted.



Marker animations come to iOS

Time to make your markers move! There are a few ways to animate markers on Android, and today we’re adding the ability to animate marker position and rotation on iOS using the Core Animation framework. Animation for these properties happens automatically, but this can be customized if you’d like something a little different, or turned off entirely. You can also animate the icon of your marker using the existing images and duration properties of UIImage.








Playback GPS routes using flat markers (left), or use animated marker icons (right, iOS only).



Platform specific updates

The latest version of the Google Maps SDK for iOS now officially supports iOS version 6 and above, adding support for iOS 7, and removing support for iOS 5.1. Those of you running maps on mathematically intensive applications will be glad to know we have added ARMv7s support (and we’re investigating ARMv8 as well). For the the full list of new features and bug fixes see the Android and iOS release notes.



We’re rapidly adding new features, so if you had your fingers and toes crossed for a feature that isn’t in this release, please let us know on the issue tracker. Lastly, if you have any technical questions that aren’t answered in the developer documentation, post them to the Google Maps Developer Community on Stack Overflow.



In this guest blog post, we hear from Adam Ratana, a hobbyist photographer and software engineer by day, and developer of the Android and iOS Sun Surveyor apps by night. In this tutorial, Adam talks about his creative implementation of custom polylines on Street View panoramas in the Google Maps SDK for iOS. ...
In this guest blog post, we hear from Adam Ratana, a hobbyist photographer and software engineer by day, and developer of the Android and iOS Sun Surveyor apps by night. In this tutorial, Adam talks about his creative implementation of custom polylines on Street View panoramas in the Google Maps SDK for iOS.




 As a photography enthusiast, I’m always looking to capture images at the magic hour. My goal when creating Sun Surveyor was to give users an immersive way of visualizing the location of the sun and the moon, making it easy for anyone to figure out when the natural lighting is just right for the perfect shot.



When I set out to build Sun Surveyor, I knew I wanted to give users an easy way of visualizing the location of the sun and the moon. Sun Surveyor has an augmented reality (AR) feature, which overlays sun and moon paths on top of the device camera’s view. This is useful for understanding how light will change over time at a particular location. While I also created a Map View to show the paths on a Google Map for remote locations, it was not as intuitive as augmented reality.






Visualizing the sun and moon paths in augmented reality and map views



When Street View launched in the Google Maps SDK for iOS in v1.4.0 (July, 2013), I couldn’t wait to visualize the sun and moon paths within an interactive panorama. Street View panoramas bridge the gap between Sun Surveyor’s Map View and AR experiences by giving users an augmented reality experience, wherever they want to go.






Sun and moon paths with Street View panoramas



Implementing a sun path Overlay on Street View

I took a creative approach to working with the Google Maps SDK for iOs.  While polylines can be implemented in Map View, this isn’t yet possible in a Street View panorama. To display paths and other items that move with the Street View panorama, I needed to:


  1. Create an overlay on top of the panorama upon which to draw the items

  2. Synchronize the positions of the overlay items with the panorama as it moves

  3. Determine which data are visible and where on the screen to draw them


For this tutorial, I have provided a sample project that will get anyone started doing the same. Let’s walk through the steps.



I. Creating an Overlay



In our main UIViewController, we add a subclass of UIView for the overlay, make its background color transparent, and place the GMSPanoramaView below it in the view hierarchy.



Author Photo

Author Photo

It’s been a few weeks since the last Fab Friday post. The team has been hard at work on a couple of new videos for you. Take a look:


First up is The Mobile Experience, a new series where Paul Saxman talks about mobile map design. In this episode, Paul talks about building a smartphone interface for browsing a collection of places on a map that can be browsed one handed.




Paul posted his Google Maps Android API v2 code on GitHub.


Next up, we have an episode of DevBytes: Maphacks on animating markers. Ankur Kotwal and Chris Broadfoot talk about the latest techniques for marker animation on the Google Maps Android API v2.




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


Posted by Mano Marks, Maps Developer Relations Team





When you travel or look at a map of your city, you want it to be as accurate as possible. We do too. That’s why we’re launching our Ground Truth initiative in Hong Kong and parts of Russia (including Moscow, St. Petersburg, Novosibirsk, Yekaterinburg and large areas in the west of the country), so we can build a better map that helps you find what you need and get to where you’re going, quickly and easily. These new, updated maps for Russia and Hong Kong will automatically become part of your maps using our JavaScript, Android, and iOS APIs. Ground Truth enables us to update a country’s map at a faster pace to provide you with an up-to-date map that mirrors the real world as closely as possible. Ground Truth also makes it possible for you to contribute your local knowledge to the map and report any issues you find through the Report a Problem tool, so together we can build a better map.






The updated maps in Russia and Hong Kong now provide detailed walking paths in many well-known parks and landmarks, making navigating easier especially in pedestrian-friendly Hong Kong. For example, we’ve added walking paths to Victoria Park - you can now zig zag across the park as you please.














Russia is rather large, so many people prefer to travel by car. Today’s update is good news for drivers as well, as we’ve made big improvements to our road network. We’ve updated street names, turn restrictions and one-way streets as well as completely new maps in more than 50 towns across Russia. So the next time you drive to the city center for shopping, try out the Google Maps app for Android and iPhone to get there.


















If you’d rather adventure by sea, we’ve also added ferry routes, down to the specific harbor of departure. For example, in the updated map of Hong Kong’s Central and Western District below you can see the ferry routes as well as nearby points of interests and transportation options.

















The updated map also indicates places of interest more clearly, such as hospitals, national parks, and universities. For example, Moscow State University, Russia’s oldest and largest university, now has more detail with cleaner walking paths, named roads, and labels for different department buildings.

















Whether you’re gazing at the awe-inspiring spirals of St. Basil’s Cathedral in Moscow or strolling through the bustling Tsim Sha Tsui Promenade in Hong Kong, Google Maps is here to help you see, explore, and discover the world!






To learn more about Ground Truth, check out this presentation from Google I/O 2013: https://www.youtube.com/watch?v=FsbLEtS0uls



Posted by Kirill Levin, Google Maps Software Engineer


In today’s guest blog post, we hear from Monika Szymanski and Mike Kelley, of Orbitz' Android engineering team, who recently migrated from version 1 to version 2 of the Google Maps Android API ...
In today’s guest blog post, we hear from Monika Szymanski and Mike Kelley, of Orbitz' Android engineering team, who recently migrated from version 1 to version 2 of the Google Maps Android API





About Orbitz

Nearly 30% of Orbitz.com hotel bookings are now made via mobile devices, fueled in part by the growth of the Android platform. The recently released 3rd-generation update of the Orbitz - Flights, Hotels, Cars app for Android brings major speed and ease of use improvements along with the latest Android UI design patterns to the app. The Google Maps Android API v2 is also integrated into the hotel search experience. Read on to find out how we did it, with tips and sample code along the way.



Migrating from v1 to v2 of the Google Maps Android API 

While users of the Orbitz.com Android app will notice some changes to the app’s user interface for maps, the changes to our code are more than skin deep. New classes offered in v2 of the Google Maps Android API like MapFragment and SupportMapFragment, the transition from ItemizedOverlays to Markers, and the addition of a well-supported info window pattern have made including a Google Map in an Android app much easier.






Say hello to the 3rd generation of Orbitz - Flights, Hotels, Cars app, using the Google Maps Android API v2



Featuring Fragments 

Prior to the introduction of MapFragment (and SupportMapFragment)  in v2, we had to write a lot of code to manually show/hide the map view in our app. Only one instance of MapView could be created per activity, so we had to be overly clever about persisting that instance in our Activity. Lack of proper Fragment support was a common pain point for developers integrating v1 of the Google Maps Android API in their application.



When Fragment support was added in v2, we essentially rewrote our map code to take advantage of the new features of MapFragment. Let’s start by taking a look at our hotel results Activity layout:




























It’s Friday again, and you’ve survived another week. Time for some mapping!






I’ve got another video for you! Yesterday I released a Google Maps Shortcuts episode on indoor maps in the Google Maps SDK for iOS. Check it out:












I’ve also put together this playlist for iOS Developers using our SDK.












For JavaScript developers, Emily Bennett is doing a series of tutorials on Webdesigntuts+ on using the Google Maps API. Emily is the creator of the Portsmouth History Photo Map which we featured as a Map of the Week. She’s got three tutorials up, and one more on the way. Nice work Emily!






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






Posted by Mano Marks, Maps Developer Relations Team