I was recently a guest blogger on the Google Geo Developers blog, outlining GameStop’s use of Google Maps APIs in building an immersive experience to promote the launch of The Witcher 3: Wild Hunt.
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.
The game’s launch deadline required us to build the site within a tight timeframe. We chose Google Maps APIs because they provided the tools we needed to build our maps quickly and easily. They also let us focus on the site creative rather than get bogged down with technical issues. We use the Google Maps JavaScript API for the front end, to start the experience and immerse visitors into the virtual world. Then, with the Google Maps Street View Service, we allow users to search for monsters. We took images of the monsters and used overlays to drop them into familiar surroundings.
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
