SHOWING VS TELLING: How to embed a Google Map into your storyTweet
Whether we're talking factless works of fiction or Pulitzer Prize-winning journalism, a writer needs to illustrate the story. And in this digital age of multi-channel storytelling, it's important for every online news organization to show their stories in as many ways as possible. This is at the heart of my love affair with Google Maps. Especially when we're talking about local journalism. People like to see where the news around them is happening. It's also great for filling out space on breaking news stories that may not have much more information than a location yet available.
In about a minute (seriously, it's not that difficult), you can add an interactive map to any online story and show your "where." Google an address, grab the embed code, paste it into your web-publisher, voila.
We've been taking advantage of this at NewHavenRegister.com quite a bit recently. Every time I catch a story that has a location I can pinpoint on a map, I add it to the story. That is of course, if it makes sense to show the location. For example, if you are working on a story about a man who was arrested for stealing a vanilla ice cream cone from a kid - you want to show where this crime occurred on a map. But if the only "where" info you have is the man's address -- as some blotter stories do -- there is often little reason to map that. Don't map just to map. Map information that has context in the story you're telling.
Here are some examples of how I've used it:
- Bridgeport man charged in deodorant heist
- Two people shot at New Haven Dunkin Donuts
- Clerk injured in Hamden armed robbery
- Hamden cops describe cops suspect in Walmart robbery
- New Haven cops seek public's help in finding alleged child beating suspect
- Serial rapist sought in New Haven
- FBI launches digital billboard campaign to capture 'East Coast' rapist
1. Go to maps.google.com and search the address you want to map from your story. Be as specific as you can, including town and state, since it's not really that small of a world, afterall. In most cases, I just copy and paste from the story itself. For practice - type in your own address. In my case, I'm at 40 Sargent Drive, New Haven, CT.
2. The search finds your address, zooms in and sticks a red push pin on the address you entered. In my example, it looks like this.
3. Now look in the upper right corner of your map. See that little icon that says 'Link'? Click it. This gives you three options. You can copy the 'link', you can copy the 'embed code', or you can preview and customize the embed code. You could be done now by copying the embed code and pasting into the source code of your story. But because I'm an anal retentive online producer, I always preview and customize, and this takes an extra few seconds, but it adds to presentation.
4. If you click 'Customize and preview embedded map' it opens a second window that serves as the map embed code editor. It should be fairly smooth for you to intuitively operate. At the top you customize the size. For publishing on a New Haven Register web page, I always make the width 635, and will leave the height at 350, unless it's a map that shows multiple items or a large area. On the illustrated map, you can zoom in or out with the little white plus or minus icons in the corner of the map. You can also move the map around by clicking it and dragging. You can also minimize the pop-up address bubble by clicking on the 'x' in the bubble. You can even change the map look to "Satellite" or "Terrain." The embed code changes live as you make changes to that map illustration. So make it look exactly how you want it to look, and then copy the embed code and paste it where ever you plan to paste it. It should end up looking something like this:
View Larger Map
Of course you can go much deeper and get much more advanced for some stories, as The Register Citizen did with their interactive map of reported roof collapses across the state of Connecticut.
Please share your own tips, links and examples of maps you've seen or produced on other websites.