GMaps-API + Awesome Screenshot = High-Res Treasure Map

There is a certain positive correlation to observe between

  • the age of a child and
  • the thrill expected from its birthday party.

So last week, I found myself thinking about some kind of Ingress competition for my son’s 10th anniversary. With some intervention of my wife, fortunately, we came up with a more down-to-earth scheme: Two teams of five boys each (the “red knights” versus the “blue monks”)  had to hunt down 20 “magic symbols” (really horrifying tongue tattoos only to be “resolved by a truthful mouth”) which the “white sorcerer” had hidden in a rural area of ~20 square kilometers between our house and a playground/barbecue place in the village nearby.

From the two tasks of the white sorcerer

  • Hiding the treasures only equipped with a bike and a single hour of sparetime
  • Printing two maps on A3 paper detailed enough such that the young lads stay on track

only the latter turned out to be easy enough, thanks to the Google Maps Javascript API.

Treasure Map using Google Maps
Treasure Map using Google Maps

It allows to create a web page with a quite high resolution of

html { width: 4200px; height: 2970px }
body { height: 100%; width:100%; margin: 0; padding: 0 }

For leaving out any unnecessary distractions, you can customize the map options

var mapOptions = {
center: new google.maps.LatLng(49.405500,7.195000),
zoom: 17,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{featureType: 'road',elementType: 'labels.text',stylers: [{visibility: 'off'}]},
{featureType: 'poi',elementType: 'all',stylers: [{visibility: 'off'}]}
]
};

var map = new google.maps.Map(document.getElementById(“map_canvas”),
mapOptions);

Then, you can place valuable hints on the resulting bitmap once you detected their GPS coordinates (e.g., by using the right-click command “What’s here” in the official Gmaps interface).

var start = new google.maps.Marker({
position: new google.maps.LatLng(49.406500,7.177241),
title:"Start",
icon: 'tower.png'
});
// To add the marker to the map, call setMap();
start.setMap(map);

Finally, you need to capture the single-bitmap-web-page at once, independently of your screen resolution. This is the domain of Awesome screenshot.  Believe me, I tested a whole lot of these extensions in Chrome, but that was the only “awesome” one that didn’t crash and produced a reasonable result (click on the image above).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s