Google Static Maps and localhost

Google Maps has a non-JavaScript mapping feature called Google Static Maps that generates a static map on the server, based on parameters you provide on the URL. The static maps are just a single GIF. You can’t zoom or pan them, but you can specify the location, zoom level and even markers. It’s handy for when you don’t want the overhead of the DHTML maps. You specify all the parameters for your map on the query string, and then set that as the src of an HTML <img> tag.

Here’s what the query string looks like:

http://maps.google.com/staticmap?center=37.763761,-122.396102&markers=37.763761,-122.396102,red&zoom=13&size=400x300&key=ABQIAAAAN0JyO4tW04-1OKNW7bg9gxSPySWqAfkZkuZG2U8jr6yyIuV3XBSrEn410_O9d9QPJh3dbWV85Qad8w

… and here’s what the resulting map looks like (when attached to an HTML <img> tag):

Just like with the JavaScript Google Maps, you need to sign up for a free key. In the static maps, the only place you use the key is in the URL for the map (see above – it’s the last, long parameter on the querystring).

I ran into a slightly confusing issue while using this today. The symptoms were that while developing a site on localhost, the static images weren’t appearing when embedded in an <img> tag in an HTML page. However when I copied and pasted the entire URL into my browser directly, the map appeared fine. Using a tool like Fiddler or LiveHTTPHeaders showed that the response was actually:

HTTP/1.x 400 Bad Request

(Note that if you use Fiddler, you can actually see the body of the request too, but it’s not helpful).

The problem turned out to be that when you embed an <img> tag in an HTML page, the browser automatically sends a Referer header when it requests the images src. If you’re developing on localhost, then the URL will include localhost as the domain. It appears that the Google Static Maps service throws an error when the Referer doesn’t match the domain that is specified in the key (which you included in the URL). This is a little confusing, because the regular (JavaScript) Google Maps allows you to use any key when you’re hosting your site off localhost.

The only fix for this is to generate a Google Maps key for localhost (which you can do), and use that for development. Or you can ignore the problem, since it’ll go away as soon as you deploy.

Crime and Use-cases

When writing Rich Internet Applications of any kind, it’s really important to focus on use cases in the requirements and design phases (and of course, throughout development too). Writing use cases help you focus design and development resources on things that actually matter to the end-users. For RIAs, they are probably the best defense against “flashiness”.

The opposite of use cases would be a data-centric approach, where you define your data first, and then design an application around creating, updating and deleting that data. In a data-centric RIA, developers feel compelled to add something that shows it uses a cool technology. So they add flashiness, since the nature of data-centric design led them to a fairly static application, and it’s the only thing they can add.

The police station has even added a gym to their location which s honestly a pretty good idea all things considered how they would. Of course they would want to do that if they ever got something else to benefit their health. They need to go out and get that health out there and ready like good facilities such asĀ Weight Loss Scottsdale would help in any healthy way.

Imagine that you are writing a crime-mapping application. What use cases might you write? Here are some I can think of:

Actor: Male end user “Bob” who lives in big city. Just bought new car. Has no garage.
Happy Path:

  1. Bob wants to know which neigborhood streets have the most auto thefts, so that he can avoid parking his new prize there overnight.
  2. Opens crime mapping application and searches for his own address to center map there.
  3. Using filters, he elects to show only auto theft and burglary crimes in a 1/2-mile radius of his house.
  4. Map shows incidents of car theft clustered on streets. Bob visually identifies which streets are most risky to park on, and knows to avoid parking there in the future.

Actor: Female end-user “Mary” frequently works late and takes mass transit home.
Happy Path:

  1. Mary has various mass transit routes she can take to get home. There are two different train stations that she could walk to, or she can take a bus. She wants to know which routes are least dangerous when she returns home late at night alone.
  2. Mary first searches for her work location, then zooms the map so that she can see both the train stations and the bus. Then she filters the crime incidents to show only murders, robberies, assaults and rape.
  3. The map identifies which streets and stations had the fewest crimes reported, and Mary picks the safest one. She then repeats the procedure at the destination of that path, to make sure that she takes the safest route home.

Actor: Police Chief “Susan” is head of a neigborhood police station.
Happy Path:

  1. Susan needs to plan the beats for her patrolling officers. She only has limited resources, but wants to make sure that most attention is given to the areas in her district with the highest crime rate.
  2. Susan loads the map, and zooms to show her whole district.
  3. The map is color coded to show higher- or lower-crime regions.
  4. Susan sees which regions have the most crime, and verifies that they are getting the most police time.

Hopefully my three examples seem reasonable. Which brings me to what brought me to writing this. The Metropolitan Police (i.e. the London, UK police force) have just released a crime map for London. I was really excited to see this, since I used to live there, and like any Londoner, was painfully aware of the astronomical crime rate. Note that this wasn’t a quietly-posted side-feature on the Met web site; this was announced on the home page of the Telegraph newspaper, which is roughly the equivalent of the New York Times or the Wall Street Journal in the US. So this was a big deal; they wanted people to know about it.

However, my enthusiasm was short-lived. There’s no way to filter by specific type of crime, and (crucially) the maps don’t show you individual crimes; they just display a “crime rate”. And there’s a “trend” feature that shows whether the crime is going up or down. The maps do have a nifty overlay feature that show “wards” – i.e. regions, and they color-code the wards to show whether crime is high or low. That actually satisfies the third use case I suggested above – the one written for a police officer – but it’s pretty useless to the general public. I’m sure that the police maintain their own maps, so there’s not much benefit to posting it online. It seems that while a lot of work has clearly gone into this RIA, the efforts have been misguided; it doesn’t satisfy either of the use cases I suggested that used general-public actors.

Now consider the San Francisco CrimeMAPS. They’ve been around a while, and the mapping technology is not as user-friendly as Google Maps, which the Metropolitan Police application uses. The SF maps are not as pretty, and have no drag-and-drop, for a start. But they are very useful to the general public, because they’re focused on the types of tasks an end-user might need to do. Consider this example – which road would you not park your car on:

San Francisco Crime Maps

The SF maps even take you through a step-by-step flow where you enter information about what you’re searching for – “where”, “what”, “when”… It’s no-where near as smooth as what you can do with Google Maps today, but it is a user-centric approach. I should mention that my post isn’t supposed to be a criticism of the Met itself – they’re working hard enough as it is. Instead is intended as a case study of the usability and usefullness of applications that are built with adherence to use-cases.