google maps part 2

Last year I wrote about how integrating with Google Maps was pretty easy.

This year I've been helping a few other porchfests, in particular with getting drafts of their map together. (Though fair warning, double check the licensing of Google Maps API)

A bit ago when I was talking about PHP making easy things easy it was using PHP's file_get_contents() to hit the Google Maps geocoding API (URLs of the form https://maps.googleapis.com/­maps/­api/­geocode/­json?­address=SOME+­ENOCODED+­ADDRESS&­amp;­key=­YOUR_­API_­KEY) to convert addresse to the latitude/longitude the rest of the API uses. Wrapping that in a hacky PHP script rather than doing it by hand via a website sped things up, though you have to learn how to see if you've gotten a proper full match, or if it can't find it and is just locating the city center.

So, the site was looking for a printable version of their neighborhood map, with icons for the porches marked, vs an interactive thing for their site. A few tricks and traps:

I used this one Google chart marker API for the pins, though I guess technically that's deprecated - still it was somewhat easier than rolling my own markers in Processing. A sample URL for that was http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=K|00FFFF|000000 to make something like

Another issue I had was Google was showing me local business names, and that was making the map too confusing. stackoverflow to the rescue, the trick was to hide those via a styler.

Also, previously I mentioned phantom.js as a screencapture tool - in this case it let me make a virtual screen that was bigger than my physical monitor, by fiddling with the viewport size. (Admittedly, this whole thing is kind of weird for print, because you end up with something sized for screen resolutions and not print DPIs)

Finally, I also researched making phantom.js wait for a page to load - or rather, waiting 5 seconds before taking the screen shot, to allow the Google page to settle, when I was zoomed in a bit more. My final phantom.js script was:

var page = require('webpage').create();
page.viewportSize = {
  width: 1800,
  height: 3600
};
page.open('http://localhost/plum2015/view.php', function () {
    setTimeout(function(){
        page.render('plum17.png');
        phantom.exit();
    },5000);
});

Then I had to crop it... rather than setting up pixel magic, it was easier to do it on the OSX program Acorn, which had a nice "set a cropping box at a specific ratio" feature.