Posted:


Editor’s Note: ‘Map Tips’ are designed to answer frequently asked questions about using Google Maps APIs. For important tips on how to deploy Google’s mapping tools, read more from David McClusky, Solutions Architect at Google.

Since the launch of Google Maps APIs, developers have built useful maps to help consumers find nearby stores. Almost ten years later, store locators continue to be a primary use case for our mapping tools, but we think there’s even more developers can do with our APIs.

Here are seven helpful tips for building a beautiful, user-friendly store locator for your customers:

1. Use Autocomplete for address entry. Autocomplete is a feature of the Places library in the Google Maps JavaScript API. You can use autocomplete to give your applications the type-ahead-search behavior of the Google Maps search field. When a user starts typing an address, autocomplete will fill in the rest. The Google Places API provides a search box widget with this functionality so there’s no need to parse inaccurate user entries.

2. Provide a ‘Signed-in’ experience. With Attributed Save, your visitors can save your store locations to view on other maps throughout the web, such as maps.google.com, and link back to your site when selected. When you enable sign-in with the Google Maps JavaScript API, your users will have a map tailored to them which means their saved locations (e.g. home and work) will show also on your map.

3. Automatically locate your customers using HTML5 Geolocation. When a user arrives at a store locator page, they typically want to find a store as quickly as possible. HTML5 Geolocation gives you the ability to immediately identify the location of the user and automatically present the nearest store locations within her area. Making store location as efficient and simple as possible means customers can find what they are looking for quickly and ultimately arrive at one of your stores sooner.
A great example of Geolocation is the 'Find FedEx Locations' on the FedEx website. The closest store locations are automatically displayed when the user starts searching for a FedEx location near them.

4. Provide a Street View image of your store exterior. Using the Google Street View Image API, you can help guide customers to your door by providing an image of your storefront and adjacent area. The Walgreens App has integrated Google Street View with its Store Locator feature, making it easier than ever for Walgreens customers to get in, get out and get on with their day. With the updated Store Locator feature, customers can easily find a Walgreens, access store details and view the store location up close.

5. Sort results by actual driving distance. Typically, store locator databases will provide an ‘as the crow flies’ distance when performing a spatial search. In some instances this can be misleading. After performing your database search, you can re-sort the results using the Distance Matrix Service to obtain actual driving distances. In addition, you can provide the actual driving or transit directions right on your map using the Directions Service, so customers do not need to leave your application.

6. Use a large, stylized map as the focus of your application. People think visually and spatially, so a stylized map should be the focus point of your store locator. To improve the effectiveness of your map visualization, consider using dynamic elements such as automatically highlighting markers of selected stores, or setting the zoom level automatically to capture all your markers. You can also use styled maps to customize the presentation of the standard Google base maps to align with your store brand or visuals.
When a user selects 'Find Us' on the Tesla website, the first thing he sees is a large map automatically displaying all Tesla locations in his area.

7. Let the map drive the search experience. Allow your users to find additional store locations as they navigate the map. Introduce an event listener on the map idle event to fetch stores whenever the user pans or zooms the map around. This creates a more interactive and engaging experience for the user by not requiring text input to refine their search.

To get started quickly with some sample code, take a look at the Store Locator Library for the Google Maps API, which includes a fully-implemented store locator example with many of the above features included.

We hope you’re able to incorporate some of these store locator tips into your customer experience. Learn more about what Google Maps APIs can do for websites and applications.


Posted:


Editor’s note: Today’s guest blogger is Brian Langel, Co-Founder and CTO of Dash. Read how the connected driving company, Dash, is using the Google Maps APIs in their real-time auto diagnostics app.

Dash provides real-time diagnostics for your car—think of it as Fitbit for automobiles. Our app connects to a car’s on-board diagnostics system and gathers information that can help you become a safer driver while saving you time and money. You can also use it to get accurate estimates for repairs and share your driving experiences with friends.
We use the Google Maps Roads API to reconstruct and visualize trips, so users can revisit where they’ve driven and share their trips with others. When we launched the Dash app in February 2014, the Roads API wasn’t yet available. We used reverse geocoding to turn GPS coordinates into visual routes. Users had two options: GPS polling every few seconds, which drained phone battery but resulted in better accuracy; or less-frequent polling, which saved battery life at the expense of accuracy.

Below you can see the reconstruction in action. On the left in blue is the route calculated with GPS information gathered by the app every eight to 30 seconds. On the right in blue is the route reconstructed using the Roads API. Note that the reconstructed route shows that the car took a main road, which Google Maps shows in orange in the left screenshot. The orange isn’t visible in the right screenshot because the blue line sits on top of it.
We started using the Roads API as soon as it was available. It was a no-brainer, since we’re a small startup without the resources to build a database that matches GPS coordinates to road locations. The comprehensiveness of the Roads API allows us to map all road locations in the US. Now that our app uses data from the Roads API, users don’t need to sacrifice their phone’s battery life to get an accurate route history. The app polls a phone’s GPS once every eight to 30 seconds, then strings the coordinates together using reverse geocoding and the Roads API.

We do this route reconstruction by telling the Roads API to match a trip’s GPS coordinates to specific road locations. Here’s an example of this code:
String url = String.format("%s%s&interpolate=true&key=%s", GOOGLE_ROADS_SNAP_URL,
                          pathEncoded, roadsKey);
ClientResponse response = client.resource(URI.create(url))
                                .accept(MediaType.APPLICATION_JSON_TYPE)
                                .get(ClientResponse.class);
if (!isSuccess(response)) {
 return handleFailure(response);
}
SnappedRoute snappedRoute = response.getEntity(SnappedRoute.class);
if (snappedRoute.getSnappedPoints() == null) {
 return Optional.absent();  
}
List snapped = convert(snappedRoute.getSnappedPoints());
Since launching our app, we’ve tracked millions of trips for our nearly 200,000 users. With the Roads API, we’ve given them more accurate histories of their routes and improved battery life. We’re looking to expand our use of the Roads API by getting speed limit information so drivers can use the app to better manage fuel efficiency and compare their actual speed with the legal limit. This is just one of the new features we’re considering as we think about ways to help people drive smarter.

Posted:


If you're an iOS developer, you're probably aware that you have the ability to open some apps directly by taking advantage of their custom URL schemes. (And if you're not aware of that fact, I have an excellent set of videos to recommend to you!)

Of course, we wouldn't be telling you all of this on the Google Geo Developers blog if it weren't for the fact that you can also use the comgooglemaps:// custom URL scheme to open up a map, Street View, or direction request directly in Google Maps on iOS.
Constructing these URLs, however, isn't always easy -- I don't know about you, but I don't spend a lot of my time memorizing key/value pairs for URL arguments. And adding x-callback-url support, while super useful for redirecting users back to your app, means adding even more URL arguments and escaping. And because not everybody has Google Maps installed on their iOS device, you may also want to build URLs to open up Apple Maps, which have their own similar-but-slightly different set of URL arguments.

It was one of those situations that made me say, "Hey, somebody should write a utility to make this easier." And that's how, a few months later, we ended up publishing the OpenInGoogleMapsController for iOS.

OpenInGoogleMapsController is a class that makes it easy to build links to open a map (or display Street View or directions) directly in Google Maps for iOS. Rather than creating URLs by hand, you can create map requests using Objective-C classes and types, so you can take advantage of all the type-checking and code hinting you've come to expect from Xcode.

For instance, if you needed biking directions from Sherlock Holmes' apartment on Baker Street to Scotland Yard, your request might look something like this:

GoogleDirectionsDefinition *defn = [[GoogleDirectionsDefinition alloc] init];
defn.startingPoint =
    [GoogleDirectionsWaypoint waypointWithQuery:@"221B Baker Street, London"];
defn.destinationPoint = [GoogleDirectionsWaypoint
    waypointWithLocation:CLLocationCoordinate2DMake(51.498511, -0.133091)];
defn.travelMode = kGoogleMapsTravelModeBiking;
[[OpenInGoogleMapsController sharedInstance] openDirections:defn];

My favorite feature about this utility is that it supports a number of fallback strategies. If, for instance, you want to open up your map request in Google Maps, but then fallback to Apple Maps if the user doesn't have Google Maps installed, our library can do that for you. On the other hand, if it's important that your map location uses Google's data set, you can open up the map request in Google Maps in Safari or Chrome as a fallback strategy. And, of course, it fully supports the x-callback-url standard, so you can make sure Google Maps (or Google Chrome) has a button that points back to your app.

Sound interesting? Give it a try. Just add a couple of files to your Xcode project, and you're ready to go. Feel free to add issues or enhancements requests you might encounter in the GitHub repository, and let us know if you use it in your app. We'd be excited to check it out.

Posted:

People don’t think of their location in terms of coordinates on a map. They want context on what shops or restaurants they’re at, and what’s around them. To help your apps speak your users’ language, we’re launching the Places API for Android, as well as opening a beta program for the Places API for iOS.

The Places API web service and JavaScript library have been available for some time. By providing native support for Android and iOS devices, you can optimize the mobile experience with the new APIs by taking advantage of the device’s location signals.

The Places APIs for Android and iOS bridge the gap between simple geographic locations expressed as latitude and longitude, and how people associate location with a known place. For example, you wouldn’t tell someone you were born at 25.7918359,-80.2127959. You’d simply say, “I was born in Jackson Memorial Hospital in Miami, Florida.” The Places API brings the power of Google’s global places database into your app, providing more than 100 million places, like restaurants, local businesses, hotels, museums, and other attractions.

Key features include:
  • Add a place picker: a drop-in UI widget that allows your users to specify a place
  • Get the place where the user is right now
  • Show detailed place information, including the place’s name, address, phone number, and website
  • Use autocomplete to save your users time and frustration typing out place names, by automatically completing them as they type
  • Make your app stand out by adding new places that are relevant to your users and seeing the places appear in Google's Places database
  • Improve the map around you by reporting the presence of a device at a particular place.

To get started with the Places API for Android, watch this DevByte, check out the developer documentation, and play with the demos. To apply for the Places API for iOS beta program, go here.

Posted:


Editor’s note: Since the launch of Google Maps ten years ago, maps have come a long way. To celebrate a decade of map innovation, we’re highlighting unique applications built by our developer community. Hear from Dan Edgar, Developer at digital creative production company UNIT9, and see how they’re using the Google Maps APIs to create an interactive experience for the new movie Kingsman: The Secret Service.

Many people dream about being an undercover agent on a top secret mission. With the help of the Google Maps APIs, our team at Unit 9 is making that possible for the fans of the new movie Kingsman: The Secret Service.

Become a Kingsman is an immersive online and mobile experience, which challenges players to prove they’re knight-worthy by completing a series of interactive games. Created as a way to promote the movie, players can use their smartphones as multi-purpose spy gadgets and interact directly with the Kingsman characters. In the second mission, which uses the Street View Image API, the phone serves as a compass for navigating King’s Cross. As they explore their surroundings, players locate potential targets and interrogate them for crucial intelligence.


To blend modern-day London with the film’s universe, we used the Google Maps Javascript API and Street View Image API. We used real images of the King’s Cross railway station from the Street View API, then inserted Kingsman characters for players to discover and interrogate. We created custom Street View panoramas using high-resolution base images of the characters and added these retouched images to views of King’s Cross. To create a full tile set for each panorama, we wrote an export script in Photoshop, allowing players to zoom into the game at different levels without sacrificing quality.


Our team built a custom user interface, enabling us to design navigation arrows and other visual elements that fit with the Kingsman experience. To achieve this interface, we positioned it over the Street View object using the panorama ID of adjacent Street View imagery and found the IDs by setting a small radius value in google.maps.StreetViewService.getPanoramaByLocation and including the ID in google.maps.StreetViewPanorama.setPano. We then grouped our markers into sets for each stage of the mission — the introduction, search and escape — and positioned each set using data loaded from an external JSON. Finally, we used google.maps.marker.setVisible to hide markers outside the current stage.


Working with Google Maps APIs opened up new creative possibilities for us. By adding custom elements to Street View, we were able to create a new world — one that people could easily jump into and explore.

Posted:

Mobile adoption continues to grow and location-aware apps are becoming a big part of everyday life.  On your device you can find a fitness app measuring how far you’ve walked, transit apps notifying you when the next bus arrives, and driving apps to help you find the best route home. The Google Maps APIs have been a key part of apps that are changing the way you exercise, commute and live.


Today we’re introducing a new API that makes location-based mobile development easier. The Google Maps Roads API provides a snap-to-road feature that lets you create useful visualizations from raw GPS locations, turning jittery GPS tracks into smooth paths that follow the road around curves and corners. The Google Maps Roads API also provides speed limit data for paid Google Maps API developers. Screen Shot 2015-03-05 at 11.03.56 AM.png
To see for yourself how the Roads API improves routing and displays speed data, check out our demo.

To demonstrate the benefits that Roads API can provide for your app, we've partnered with Dash, a connected driving app. Dash provides real-time diagnostics for automobiles so that drivers can save time and money by driving better and more intelligently. One key challenge for Dash was not being able to collect enough information points to draw visually stunning lines on the map without creating a drain on the device’s battery. With the Roads API, Dash can sample less frequently and still get accurate and beautiful visualizations of routes, even on roads that are curvy or otherwise hard to visualize with less than optimal sample rates.

Let’s take a look at how the Roads API snap-to-road feature is improving the Dash app. You can see in the first app screenshot below, without the Roads API, the route doesn’t make sense unless you’re jumping a few medians, driving through the woods, and somehow not getting pulled over for ignoring basic traffic rules. The second app screenshot shows the same route after the Roads API had been implemented into Dash and is a much smoother, more accurate route.
DASH_screens_Mobile.jpg

The Dash team says they are “pretty psyched” the Roads API has optimized their visualizations and we’re pretty psyched they are happy with the result. To learn more about the Roads API, please take a look at our DevByte video, check out the documentation or download the updated client libraries  to get started.

Snap-to-road is available for free with a limit of 2500 queries per day. For the Google Maps API paid developer, the Roads API also gives you access to speed limit data from all over the world. Simply contact your account manager to get the Roads API enabled for your account. If you do not know who your account manager is, you can find it out by filing a non-technical case in the support portal. To get in touch with us to become a Google Maps paid customer, please reach out here.

Posted by Elena Kelareva, Product Manager, Google Maps APIs

Posted:


Editor’s Note: Today’s post is designed to answer frequently asked questions about using Google Maps APIs. For tips on how to deploy Google’s mapping tools, read more from Dave Overstrom, Program Manager at Google.

Google Maps APIs enable you to create familiar and engaging location-based applications. Over the past decade, we’ve worked hard to make Google Maps simple and easy to use for consumers, and we think the same experience should hold true when integrating our mapping APIs. That’s why we’re excited to announce the Google Maps API checker, a new Chrome extension designed to help deploy our licensed Google Maps APIs.

The checker allows you to determine if your website is properly implementing Google’s mapping APIs, such as the Google Maps Javascript, Static Maps and Street View Image APIs. Ideal for partners and developers, the tool shows information about common API watchpoints and pitfalls, including issues related to your client ID, digitally signing a static maps request, and optimizing your quota. No longer will you need to sift through code or the Javascript console to identify implementation problems. You can see technical issues immediately by clicking an icon in the browser's address bar.
If you’re a Google Maps customer, we hope this new extension will make implementing Google Maps APIs an even better experience. Enjoy!