Sometimes we have clients that want a copy of their map on Google on their various print collateral. As many designers know, we need to use a high resolution version of any raster image in print to ensure readability.
For today’s tip, I’ll show you how to use Google’s Static Map API knowledge to force Google to render the static map image that would be served to devices with higher resolution displays. First, we’ll need an address: 7906 Santa Monica Blvd West Hollywood, CA 90046. Next let’s head on over to http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html? and enter the address in the top right where it says “Enter a Location”.
The map will move over to above the entered address, you’ll notice that the map shows all of the other businesses around. In most cases your clients won’t want to advertise the other businesses around them, so let’s remove them. On the left panel that says “Selectors”, there is a section called Feature type, and under there you will see “Point of Interest”. Next, click Point of Interest and look down to the Visibility section and click “Off”, you will see that all the businesses have been turned of from this map.
Now that you have your area and the surrounding businesses hidden, zoom in/out to your desired level either by scrolling or by using the zoom controls on the far left. Once that is set, look at the bottom of the right panel called “Map Style” and click the Static Map button. A pop-up modal will appear with the static map image and the url to the image, next, click that URL and the image will open in it’s own window. This is where the tricks come in to play.
Take a look at the url in your address bar, for example:
http://maps.googleapis.com/maps/api/staticmap?center=34.090472,-118.361763&zoom=17&format=png&sensor=false&size=640x480&maptype=roadmap&style=feature:poi|visibility:on
The reason the url is so long is there are all sorts of parameters in it that determine what Google sends out. Next we’ll force Google to send us the higher res version by adding &scale=2 to the url, right after the size string.
http://maps.googleapis.com/maps/api/staticmap?center=34.090472,-118.361763&zoom=17&format=png&sensor=false&size=640x480&scale=2&maptype=roadmap&style=feature:poi|visibility:on
