Bing Maps: A New Look for Pushpins, Popups, and Transit

Bing Maps  just rolled out some exciting new updates to www.bing.com/maps that make it easier for you to find information on the map, explore the layouts of over 850 venues, as well as get to where you’re going with public transit (or transport). Read on to learn more!

Pushpin and Popup refresh

The pushpin. It’s the most common element overlaid on a map. And today, it’s getting an update. In making these changes, to both the pushpin and corresponding popup, our goals were simple: enable you to find the information you want, more quickly and efficiently, while at the same time minimizing obstruction of the map. Let’s take a deeper look at some before and after examples.

The updated pushpins are designed to better overlay on top of our base map color scheme and make it easier to find results when you perform a search. Search related content appears in blue, while user-generated and saved content (such as “My places”) use an orange colored pin. The contrast changes are more pronounced on hover (and for business searches, the corresponding item in the left-hand panel is adjusted as well), and we’ve also added a new small popup to tell you the name or location or the pin you’re hovering over. Now it’s much easier to quickly scan a bunch of pins to see what they are.

 

 

When you click to select a pin, it actually shrinks so as to expose more of the map underneath, and unveil our streamlined popup. Here, we’ve made a number of changes to more compactly display the relevant business or location information and stand out against the backdrop. The most popular actions available for each item have been simplified and consistently placed at the bottom. For most users (except those in the UK), the interaction has changed from a hover-only model to a click-based model for showing the full popup contents. (For users in the UK, where you already had to click to see the popup, we’ve simply added the new smaller hover popup in addition to the layout and style changes.) Overall, these improvements allow you to keep a popup visible while panning/adjusting the map, and even hover over other pins to see what they correspond to, ultimately making it easier for you to find the place you want more efficiently.

 

One final change you may have noticed is that the pushpins and popups dynamically adjust based on the current map style in order to ensure the information does not get lost on the map.

 

Enhanced Transit Experience

Public transit (and UK transport) users will find a handful of subtle improvements to our directions experience that make it easier to get where you’re going, and make sure you’re on the right line to get there. We’ve changed the way we represent each transit line to better reflect the actual colors and signage used by the line, both for our US and UK markets. You’ll see this reflected both in the on-map waypoints as well as our enhanced directions list.

 

 

More sharing options

We’ve also extended our ability to send directions to your mobile phone (via SMS) to support transit directions. This functionality is accessible via the “Send: Mobile” link at the bottom of the directions panel. You’ll receive a link on your mobile phone which loads the directions on m.bing.com, and works for all devices which can access m.bing.com (unfortunately, Windows Phone does not currently support transit).

 

Drag to modify your route

Users can now easily modify their directions routes by clicking and dragging on start, end, or waypoints. You’ll see a helpful tooltip appear when you hover over an element that can be adjusted simply by dragging and dropping—and the route will be recalculated automatically!

Explore venues

Did you know Bing Maps now has over 850 venue maps of airports, malls, shopping districts, and more? Browsing through them is now easier than ever! Just click on the “explore venue maps” link on Bing Maps, or visitwww.bing.com/maps/venues to get there directly, to browse a categorized listing of available venue maps. You can filter them by country, sort them by location (or alphabetically), and browse through them spatially on the map. If you want to have your venue be part of Bing Venue maps, please contact us for details.

 

We’re excited about this next step in the evolution of our visual design and believe it is a big step forward for simplifying user interaction with the map, and helping users find the information they want quickly and efficiently. We’ll be rolling out these changes to bring consistency across the broader Bing network over the next few weeks.

Street View imagery released in Romania

Google has just released Street View imagery in Romania, the first new release since Google Earth 6 came out last week.

romania.jpg

As you know, Google Earth 6 completely changed the way that Street View imagery is handled. If you’re not familiar with the changes, this video will show you how it works:

In addition, as pointed out by Google Earth Design, you can now include Street View when creating a tour in Google Earth! Rich even built a sample KML to show it in action.

It works just as you’d expect:
1. record a tour in the normal way,
2. drag and drop the pegman (orange man icon on the main screen controls) half way through to enter streetview
3. navigate around in streetview
4. click ‘Exit Street View’ button top left of your screen to exit street view
5. stop the tour.

He also includes a bit about the technical aspects of the KML that is generated:

GEarth 6 has spawned a new gx KML element: “gx:ViewerOptions”, this element inserted into a FlyTo parent with”gx:option name=”streetview”” tells GEarth to changes from normal to Streeview in the middle of a tour. ViewerOptions also allows historical imagery and sunlight conditions to be captured as well.

This certainly opens up a lot of possibilities for great new tours using Google Earth. Check out Rich’s full article for more information, and let us know if you create any noteworthy tours using this new feature.

HTML5, browsers, and books, twenty years later

(Updated 10:05am PST: Corrected link to f-i.com)

Twenty years ago this month, Tim Berners-Lee published his proposal for the World Wide Web. Since then, web browsers and web programming languages have come a long way. A few of us on the Chrome team decided to write an online guide for everyday users who are curious about the basics of how browsers and the web work, and how their evolution has changed the way we work and play online. Called “20 Things I Learned about Browsers and the Web,” this online guidebook is illustrated by Christoph Niemann, and built in HTML5, JavaScript and CSS3, with our friends at Fi.


In building an online book app, HTML5, JavaScript and CSS3 gave us the ability to bring to life features that hearken back to what we love about books with the best aspects of the open web: the app works everywhere, and on any device with a modern browser. Here are a few features of the book experience that we’re particularly excited about:

  • After the app has been visited once, you can also take the experience with you offline, thanks to the Application Cache API.
  • You can resume reading where you had left off as the book remembers your progress using the Local Storage API. We also mark the chapters that have previously been read by folding the top right corner of the page in the navigation.
  • The app utilizes the History API to provide a clutter-free URL structure that can be indexed by search engines.
  • The HTML5 canvas element is used to enhance the experience with transitions between the hard cover and soft pages of the book. The page flips, including all shadows and highlights, are generated procedurally through JavaScript and drawn on canvas.
  • The canvas element is also used to animate some of the illustrations in the book.
  • CSS3 features such as web fonts, animations, gradients and shadows are used to enhance the visual appeal of the app.

This illustrated guidebook is best experienced in Chrome or any up-to-date, HTML5-compliant modern browser. We hope you enjoy the read as much as we did creating it, at www.20thingsilearned.com or goo.gl/20things.




By Min Li Chan, Google Chrome Team