It’s Time to Improve Your Web Map App

 

Google had several new feature announcements for the Google Maps API in the last few months, including high resolution static maps, the new Street View Image API, and the use of high DPI map tiles in the JS Maps API on mobile devices. I’m here to give you some tips for using these new features to improve your existing mobile JS map app.

1. Upgrade Your App to Use the v3 API
If you’re still using the v2 Google Maps API it’s time to change that. Period. This is one of the best improvements you can make to your map app. The v3 Google Maps API was designed for the mobile web and it is significantly faster than its predecessor. Not only is the v3 Google Maps API designed to load fast on mobile browsers, but your app will be upgraded immediately because your map will automatically access high DPI map tiles, which have better on screen fidelity.

2. Use the Static Maps API to Improve User Experience
Check your Google Analytics data (or server logs) to see if your app is being accessed by devices with browsers that can’t or don’t fully support JavaScript. You can add logic to your app (e.g, server-side user agent checking) to determine whether you should serve your JS Maps API-based app or a static map image that shows the same or similar information. Although your users won’t be able to interact with the map, they’ll appreciate the ability to view the map. You can even add markers and other features to the static map. You’ll also be able to take advantage of the high resolution Static Maps API.

 

3. Use StreetView Images to Provide More Context
Chances are your map app gives users access to all kinds of information, whether it’s your own data and images or our very own Places API. Give your users some additional context by using the Street View Image API to provide a general idea of what a location looks like at street level. When you provide a location in your URL request, the API will snap to the panorama photographed closest to that particular location.

4. Use the JS Maps API Only When It Makes Sense
If all you need is a small map for context, you should be using the Static Maps API. This may seem obvious, but we’ve come across a few mobile apps that seem to use the JS Maps API to provide nothing more than a thumbnail. Use the Static Maps API to load a small image and, if needed, link that thumbnail to open up a larger map (whether your own page that uses the JS Maps API or maps.google.com).

And again, if you’re still using the deprecated v2 Google Maps API in any of your apps (mobile or otherwise), it’s time to migrate your app to the v3 Google Maps API, as Google are more than halfway through the three year deprecation period.

 

Street View with the Google Street View Image API

The Google Maps API family includes the Google Static Maps API, which delivers maps as fixed images in PNG, GIF, or JPG format. It’s great when you want to quickly add a map to a page without writing a JavaScript application, when you need maps on a device with no JavaScript support, or for generating lightweight thumbnail maps or maps for printing. In fact we’re so delighted with the popularity of the Static Maps API that today we’re launching an accompanying service for Street View imagery.

The Google Street View Image API brings the simplicity of the Static Maps API to Street View, providing a way to add a Street View image or thumbnail to any application without the need for JavaScript. Simply construct a URL in accordance with the documentation, and the API returns the corresponding Street View panorama as an image in JPG format:

You can use the Street View Image API in both web based and mobile apps, and the size limits and daily quotas match those of the Static Maps API for both the consumer Maps API and Maps API Premier. You can display Street View images in your apps using this API without a corresponding Google map, but if you do choose to display a map it must be provided by Google. For more details on how to use the Street View Image API please refer to the documentation.

To make it easier to find help using the Street View Image API and Static Maps API, we’re also launching a new forum today dedicated to these services. If you have any questions regarding use of these APIs going forward we recommend you head over to the new Google Maps Image APIs group. We look forward to seeing you there!

 

High resolution in Static Google Maps API

The Static Maps API is a great service for when you need to quickly generate a static, lightweight map. Following the updates to the Maps API/Earth API Terms of Service earlier this year, mobile application developers are now free to use the Static Maps API in native mobile apps, providing the map links to the Google Maps app or website for the same location. However the high pixel density of some mobile screens can make the labels and icons on such a static map unreadably small.

For this reason, we’re introducing a new feature of the Static Maps API that smoothly doubles the size of the whole image including labels, icons, and overlays, to suit high resolution screens. To apply this upscaling to an existing Static Maps API image, simply append &scale=2 to the URL.

The image returned will contain the same level of detail, but be twice as wide and tall without the stepping or blurring that results from upscaling an existing image:

scale=1
(default)		 scale=2

Note that when using the scale parameter the pixel size of the returned image is the product of the size and scale values given in the URL. The size parameter therefore now specifies the size of the required image in Density-independent pixels or Points, as they are known in the Android SDK and iOS SDK respectively.

Web based apps can also benefit from higher resolution Static Maps by adding a scale=2 image to the page with a CSS width and height that matches the size parameter. By default, the browser on many mobile devices upscales images in web pages by a device specific factor based on the pixel density of the screen. However these devices will preserve additional detail in the image if the image pixel : CSS pixel ratio matches or exceeds the scaling factor, which can be found by querying window.devicePixelRatio in JavaScript.

For example, below are the above two maps side-by-side with the same CSS size. On a desktop screen with a window.devicePixelRatio of 1.0 these will look almost indistinguishable. However open this blog post on a device with a high resolution screen, such as a Samsung Nexus S or Apple iPhone 4, and the image on the right will look significantly sharper.

scale=1 scale=2

As an added benefit, Maps API Premier developers can also request maps with a scale factor of 4. Although this exceeds the maximum window.devicePixelRatio of current mobile devices it does facilitate generating maps for printing at high quality:

scale=4

Note however that the largest image pixel size that the Static Maps API can generate for Premier customers, regardless of the value of the scale parameter, is 2048×2048. Consequently at scale=4 the largest available value for the size parameter is 512×512. Note also that any use of the Static Maps API for generating maps to print must comply with the Permission Guidelines for Google Maps and Earth, which apply equally to Maps API Premier customers.

For more information on the scale parameter, and the other great Static Maps features, check out the Static Maps API documentation. We hope this feature helps your apps enjoy the full benefit of the high resolution screens that are increasingly popular, and makes them just that little bit easier on the eye!