Here is a repost of the content:
If you’re going on a monster hunt, it’s a good idea to bring a map. And if you want to build buzz around the release of a new game, you should have the right tool as well—in our case it was Google Maps APIs. We built a website for GameStop to promote the launch of The Witcher 3: Wild Hunt, an action role-playing game from Warner Brothers and CD Projekt RED. After a visitor logs in to the promotional website, she is dropped into a map of the world and collects clues about where to find monsters. The goal is to be the first person to find each monster and win a prize.
We use the Street View API to plant the user in a random location somewhere in the world, then visualize their surroundings, including monsters and trails of blood. We set a randomly generated starting point to the map based on five predefined locations. From there we have event listeners in place for ‘mapView: bounds_changed, streetView: visible_changed, streetView: position_changed, streetView: pov_changed, searchBox: places_changed’.
When the user has initialized Street View, we make a call to our API to see if any monsters are within a defined distance from the LatLng of our monster data set. We continue this test any time the position_changed event is fired until a monster is within range. At that point, we update the class of a div that sits above the map view. Each monster is assigned a specific CSS class, which allows us to easily make tweaks.
Google Maps made it easy to combine the real world of Street View with imaginary creatures from the game. Our goal went beyond just our users having fun — we wanted to build a site that would create genuine excitement around the game and give people a taste of monster hunting in the real world.
Follow Tom Edwards @BlackFin360