Posted:


Editor’s note: Today’s guest blogger is Brett Dowling, founder and President of Tixsee, an innovative Fan Experience Management Platform for the sports, entertainment, and venue management industries. Read how Tixsee worked with Google for Work Premier Partner SADA Systems to deploy Google Maps APIs and to build a unique ticket-purchasing platform for the Dallas Mavericks.

When you go to a basketball game, you want to make sure you get great seats, secure an awesome view of the court and are able to find your way around the arena. That’s what we’re doing for fans of the Dallas Mavericks with our Tixsee platform, an immersive shopping experience that lets people see the view from their seats before purchasing.

From the Mavericks’ Web site, fans can take a tour of the arena, stroll the aisles to see the view of the court from any seat, then buy a ticket. They can also tour the Mavericks’ store and buy team gear. Visitors make their way around the arena using familiar Street View controls. We used the Google Maps Street View Service in the Google Maps JavaScript API to build this experience. We worked with Business Photos America, Google Maps Business View Trusted Agency, to take more than 12,400 images of the arena. We used those images to create more than 1,000 high-definition panoramas that re-create the arena in 3D.
PastedGraphic-1.png

The Mavericks’ ticketing platform is much more than just the site’s interactive interface. Just as important is the content management system (CMS) that lets the team do things like create special offers to drum up excitement and increase ticket sales. We use the Google Maps Embed API to embed the Street View imagery inside the CMS. The backend users can then orient the panoramas and preview campaigns before deploying to the live project. For a social media campaign, they hid a photograph of an autographed team ball in the virtual arena, and the first person to find the ball online was able to keep it. Traffic to the site spiked.
PastedGraphic-2.png

We’ve got a lot more planned, especially for mobile, because we know people will be bringing their phones to the arena. We have plans to release apps for iOS and Android in the near future. We’ll be using the Google Maps Directions API so people can find their way to one of the eight parking lots near the arena, then navigate right to their seats. It’s all part of our ultimate goal: to build a platform for the Mavericks that intensifies the fan experience and reinforces the value of purchasing tickets to live events at the arena.

Posted:



Editor’s note: ‘Map Tips’ are designed to answer frequently asked questions about Google Maps APIs. For important tips on how to deploy Google’s mapping tools, read more from David McClusky, Google Maps Solutions Architect at Google.
Millions of websites and apps are leveraging the Google Maps APIs today—whether helping users book a hotel or find a great restaurant. But, did you know that by enabling signed-in maps you can make this an even more powerful experience for your users? With signed-in Maps, you can build applications where users will see a map completely tailored to them.

Within your application, users will have the option to sign-in to the Google Map with their Google account, and will be able to see all of their favorite places (such as their home and work locations) displayed on your map. If you display your own layers of data on the map, such as markers for store locations, you can enable your users to save those to their favorite places as well, to be viewable on other Google Maps throughout the web and mobile devices (such as maps.google.com or Google Maps for Android/iOS).

For example, imagine you are building a travel site to help users choose a hotel and plan nearby activities. By enabling signed-in maps, a user can save a hotel they found on your site to their personal Google account.

Later, when continuing their research on maps.google.com or on Google Maps Mobile, your user will see the hotel she saved (indicated by a star on the map), with a link back to your site.

Getting Started

It’s easy to get started. The first step is to enable sign-in on a map created with the Google Maps JavaScript API. You do this by including “signed_in=true” when loading the Javascript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true">
</script>
When you enable sign-in with the Google Maps JavaScript API, your users will now see a map tailored to them, which means their saved locations will now show on the map. As you can see in the following picture, the user’s Google profile picture will also appear in the top-right of the map (when logged in with a Google account).

Next, you want to help your users remember the locations that matter most to them by allowing them to save places using the Attributed Save feature of the Google Maps Javascript API. With Attributed Save, saved places will appear on other Google Maps when a user views them on the web or mobile devices.

The easiest way to do this is by adding place and attribution properties to the MarkerOptions object when creating and adding a marker to your map.
var marker = new google.maps.Marker({
    map: map,
    // Define the place with a location, and a query string.
    place: {
      location: {lat: 40.739929, lng: -74.005792},
      query: Gansevoort Meatpacking NYC, New York, NY
    },
    // Attributions help users find your site again.
    attribution: {
      source: 'Altostrat Hotels',
      webUrl: 'https://developers.google.com/maps/'
    }
  });
By adding the place property with a location and query string, you are associating your marker with a specific point-of-interest in Google’s database of places. The attribution field allows your users link back to your site again in the future when viewing this saved place on other maps throughout the web. Note that attributed save requires the place to be known in Google’s database (either as a business name or an address). Here is a complete working code sample for reference.

Tips and Tricks

Here are some tips to help you make the most of signed-in maps using the Google Maps Javascript API:

When specifying the place to associate with a marker, use placeId rather than a query string to uniquely identify the place. Learn more about how to reference a place using a place Id.
Be sure to use include attribution for any markers added to the map, so your users can easily link back to your site when viewing favorite places on other maps throughout the web.
If you are showing only a single marker on a map, using the SaveWidget is a great way to highlight the location with a custom display

Resources

We hope you’re able to incorporate signed-in Maps into your website. To learn more about implementing signed-in Maps and Attributed Save, take a look at the following resources:

Posted:


When Dan Vanderkam, a developer and self-confessed history lover, moved to New York in 2011, he found himself wondering what the city used to look like. He figured other people probably shared his curiosity, so he built a website, oldnyc.org, that overlays the city’s streets with more than 80,000 images from its past.

“I've always enjoyed historic photos because they capture so many details that you'd never write about,” Vanderkam says, guessing it’s something his father, a historian, passed down to him. “They really are a window into the past.”

Vanderkam approached Matt Knutzen, a geospatial librarian at the New York Public Library, whom he met a couple of years earlier at an event at the Google New York office.

At the time, Vanderkam was developing a website that mapped old pictures of San Francisco.

“We immediately began talking about historical photos and the possibility of overlaying images in 3D space,” Knutzen recalls.

For the San Francisco project, Vanderkam scraped photos from the San Francisco Public Library’s online archive, and only asked for permission to use them once he’d completed the site.

“I realized later how risky it was to ask them that late,” he says. “So, when I went to New York and started oldnyc, I did things differently by approaching the library first.”

Starting Work on OldNYC

Knutzen, who studied geography and cartography in college, was immediately taken with the idea and knew exactly what resources to direct Vanderkam to. He introduced Vanderkam to the Milstein division of the library, which included a collection called Photographic Views of New York City, 1870s – 1970s.

The images, which are mounted on brown paper, include horse-drawn carts on barely developed dirt roads in the Bronx, skaters at Central Park in 1905, and a giant alligator balloon at Columbus Circle for Macy’s Thanksgiving Parade.
Old_Newyork_2.jpg

On oldnyc.org, clicking on a red dot marker will open a popup box containing photos of the location sorted from the earliest date to the most recent. Some of the images are undated. The site also shows the descriptions that Vanderkam says were written on the backs of some pictures.
Old_NY_1.png

Luckily for Vanderkam, Knutzen had already created a metadata spreadsheet containing unique identifiers for each photo corresponding to cross street locations.

“Plugging the data into Google Maps APIs was made easier because I didn’t have to scrape information or hunt for street names,” said Vanderkam.

To convert the addresses to latitudes and longitudes, Vanderkam used the Google Maps Geocoding API.

In order to customize his map, he used the Google Maps JavaScript API to create location markers, and adjust hue, lightness, saturation, gamma, invert lightness, and visibility. He also specified that his map only include roads and not other elements.
Old_NY_3.png

Vanderkam wanted other people to be able to engage with the pictures of the city, so he used a comments API from Facebook to allow site visitors to share their personal experiences.

Teaching Computers, Engaging Communities

Getting the photos on his site was also a challenge. Some of the photos were mounted individually, but others were mounted in pairs or more. To automate the task of matching an image with the coordinates in Knutzen’s spreadsheet and then uploading it to site, Vanderkam wrote code so that the computer could recognise the brown paper and isolate the photos. This was no simple task. To display them, Vanderkam used an expandable image grid library that enlarges a photo when it’s clicked on. The code is published on GitHub by danvk.
Old_NY_5.png

Vanderkam also created “rotate” and “improve this transcription” buttons to encourage site visitors to correct an image’s orientation or the transcription of the descriptive text on the backs of photos.
Old_NY_4.png

“Oldnyc is an incredibly valuable research tool. It’s now the best way into the photo collection,” says Knutzen. “Having the information of places aligned spatially combines information to give us new knowledge to make new discoveries.”

Vanderkam doesn’t have plans to work on maps for more cities, but hopes that someone else would be interested in picking up the baton. “The code for it is all open source, so if anyone is interested in building a version for their hometown, they should get in touch,” he says.

Posted:


Editor’s note: Today’s guest blogger is Chris Huff, Vice President of Mobile Development at The Weather Channel. Read how The Weather Channel uses Google Maps APIs to power their popular Android app. The Weather Channel is just one of many customers who shared their story as part of our cross-country road trip, Code the Road.

We know from experience that the combination of weather, mapping and community input can result in ideas that keep people safe and informed. Our Android app goes far beyond basic weather forecasting, which is why we chose Google Maps. We use Google Maps Android API, Google Maps JavaScript API and ImageOverlays to place geodata, such as weather alerts, hurricanes, and storm tracks, and weather tiles, such as radar maps and clouds, on top of Google Maps.

Radar maps are one of the app’s main features, and we work hard to get them right. We get radar imagery from multiple sources and produce raster images from them. Then we take hundreds of the images and animate them in a frame-based animation sequence. The Google Maps Android API gives us overlays to place the animation on top of maps, and also lets us add additional objects such as pins and polygons to visualize lightning strikes or a storm’s direction. You can see an example below.

The more local weather reporting is, the more accurate it is; a thunderstorm may skip one neighborhood but hit another. So to improve accuracy and to build a community around our app, we’ve been working to make it more social. People send us information about weather near them, and we use the Google Maps Android API to add a pin to the map for each user-created report. Anyone can tap a pin to see the detailed report. Here’s an example of social weather reporting.
Social Weather Reports_The Weather Channel App for Android_framed.png

With more than 68 million downloads, the app has been a tremendous success. We get 2 billion requests for radar maps every year. There’s an old saying that everyone talks about the weather but no one does anything about it. We beg to disagree. With the Google Maps APIs we’re giving people detailed, useful, live information about the weather, and we believe that’s doing quite a bit.

As part of the Code the Road series we hosted the 24-hour hackathon event, “Storm the Road: Hack for Safety with The Weather Channel and Google Maps”, on June 23. The event gave developers an opportunity to come together to create a new app or feature for mobile or web that helps keep the public safe and informed.

Posted:

We had a fantastic day on June 26 at Epcot where we hosted an event with the Disney team for 40 Tech Sassy Girlz, an Orlando-based non-profit program designed to provide girls in grades 6 through 12 exposure and access to STEM (Science, Technology, Engineering and Mathematics) fields and careers.
C11C3366.jpg

The day began with a private tour of the Code the Road bus where the girls were able to see technology first-hand, ask questions, and get a great team photo in front of our bus.
C11C3581.jpg

Rebecca Moore, computer scientist and longtime software professional at Google opened the day with a presentation and discussion about how engineering and technology has changed her life. At Google, she conceived and leads the Google Earth Outreach program, which supports nonprofits, communities and indigenous peoples around the world in applying Google's mapping tools to the world's pressing problems in areas such as environmental conservation, human rights and creating a sustainable society.
IMG_3953.JPG

The girls also heard from Disney engineer Dan Soto who introduced them to the My Disney Experience app and spoke about prototyping and everything that goes into building an app. James McGill, Engineering Manager for the Google Maps APIs gave a talk about being an engineer and how fun it is to work with code and technology every day.
C11C3571.jpg

The girls had a hand at and intro to coding with Made with Code where they learned the basics of iteration, counters, and more. Made with Code is a project that creates engaging tutorials to help women get interested in and learn how to code.
A050_C025_0626FF.0000344.jpg

Once the girls had learned all about engineering and the basics of coding, we went outside into the park for a technology-focused tour of Epcot. There were five stops on this science themed exploration: Spaceship Earth, Test Track, Soarin’, Journey Into Imagination, The Seas with Nemo and Friends, and the Google Liquid Galaxy.
C11C3814.jpg

Our final surprise was a visit from Mickey Mouse, himself, for a photo op and even a few hugs.

Although we’ve ended our 30 day journey and parked the bus, we’ll be sharing our Code the Road summary video and blog post soon.

Posted by Ashley Smith, Developer Marketing, Google Maps APIs

Posted:
In Google Play services 7.8, the place picker in the Places API for Android will use signals from beacons in determining the device’s current location.

The Place Picker is a great UI widget for helping your users communicate where they’re located in terms they understand: places, addresses, and locations on a map. With the launch of the Proximity Beacon API as part of Google’s beacon platform, Bluetooth low energy (BLE) beacons provide a new context signal to devices. When a user’s device is near a beacon that has been registered through the Proximity Beacon API, the beacon’s associated PlaceID is combined with other signals available to the device. This strong signal is used to rank the suggestions presented to the user in the place picker.

If you already use the place picker in your app, you’ll get this integration for free! Just so you know, there won’t be any additional permissions required from your users since you’ll already be requesting ACCESS_FINE_LOCATION to run the Place Picker, which includes using BLE technology to listen for beacons. The change will only influence the place inference for users who already have their device’s Bluetooth turned on; it won’t turn on Bluetooth or prompt users with it turned off to turn it on.

If you want to deploy your own beacons, visit the developer documentation for a brief tutorial.

Posted by Jen Harrington, Product Manager, Google Maps APIs

Posted:


On Tuesday, June 23 we pulled the Code the Road bus into The Weather Channel HQ to co-host ‘Storm the Road’, a 24 hour hackathon dedicated to building apps for weather safety.
A046_C007_0623VN.0000437.jpg

While in Atlanta, we hosted 14 teams of developers tasked with creating a new app for mobile or web that helps keep the public safe and informed with the Google Maps APIs and The Weather Channel data layer. Natural and weather-related disasters happen far too frequently. They can strike anywhere—across the world or right in your own neighborhood. During these events safety preparedness, adequate response and an informed public are critical.
A048_C008_0623UE.0000076.jpg

During the all night hackathon, we enjoyed meals, snacks, and a few naps but we were overwhelmed by how much the developers in the room were able to accomplish in such a short amount of time.
A046_C029_0623YY.0000131.jpg

We kicked-off the hackathon with an introduction from Ruben Brown, Regional Communications Manager, American Red Cross of Georgia, and two quick tutorials from Ankur Kotwal, Head of Scalable Developer Advocacy, Google Maps and Chris Huff, VP, Mobile & Consumer App Development at The Weather Channel. Our developers immediately started forming teams and pitching ideas. Within 30 minutes, everyone was heads down and coding.
A047_C009_062358.0000000.jpg

Midnight Madness

After 9 hours of hacking, everyone jumped up to participate in our rock-paper-scissors tournament. Teams around the room played one round of rock-paper-scissors and the winner played the winner from the adjacent team. The loser had to become their opponent’s cheerleader in the next round.
A048_C001_0623RN.0005408.jpg

After an intense and loud round of rock-paper-scissors—we crowned our winner. We had prizes for the top four winners, the overall winner, and the best cheerleader who even lost his voice during the competition. Our top four winners received a private tour of The Weather Channel Studios.
A047_C019_0623IQ.0000288.jpg

Judges

Our judging panel included two team members from The Weather Channel, Cameron Clayton, President, Product and Technology, and Jen Carfagno, On-camera meteorologist. We were fortunate to also have two representatives from The American Red Cross, Sandy Smith, Regional Chief Development Officer, and Tim Downey, Strategic Partnerships & Development. Rounding out the panel was James McGill, Engineering Manager Google Maps APIs.
STR_Judging.JPG

Results

All of the teams embraced the challenge, but there could only be three finalists.

1st Place - BeForecast: Calvin Nix, Luis Lopez, Daniell Yancey, Zacchaeus Thomas
BeForecast is an Android application developed to help provide weather related information to people planning events. This application utilizes The Weather Channel API along with the Google Maps APIs. Our goal is to help keep people informed about weather conditions as it relates to their own personal agenda.


2nd Place - Watchtower: Raymond Hebard, Ocean Evers-Peete, Austin Evers-Peete, and Wren Howell
Watchtower is a preemptive response to natural disasters and national crises for people in a foreign environment. The web application works to match individuals/groups in need with volunteers (i.e. 'Beacons') and 'Samaritans' (certified helpers like the Red Cross) who meet the criteria of being willing to help the people in need, speaking the same language of the foreign travelers, and having the proper knowledge of safety precautions for events that may occur. The Weather Channel API displays a 10-day forecast of the desired location on the homepage, and the Google Maps APIs are utilized as a visual representation to display the location of 'Samaritans' or ‘Beacons’ alongside the listing of suitable matches.

3rd Place - Emergency Delivery Service: Jon Keller, Kelly Marble, Gene Chorba, and Saeid Motevalialamoti
Emergency Delivery Service handles inventory, routing, and delivery of necessary supplies to people in need following a natural disaster. It's an Android app which uses the Google Maps APIs, a source for weather tiles, and Parse.

Congratulations to our winners and to everyone who participated in the event. We were all so impressed by how much could be built for safety using Maps and Weather in such a short amount of time.
A047_C028_0623SX.0000673.jpg

We’ve ended our journey and parked the bus, but stay tuned for even more updates from our adventures on the road.

Posted by Ashley Smith, Developer Marketing, Google Maps APIs