Monday, February 28, 2011

SHOWING VS TELLING: How to embed a Google Map into your story

In writing, 'showing' always trumps 'telling.'

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:
And here is more advanced use with multiple locations and areas:
How do you make and embed your own Google Map? Let's walk through it step by step:


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.

    Labels: , , , , , , ,

    18 Comments:

    Blogger Ivan said...

    Here's one for Holiday Lights from user submissions
    http://bit.ly/eYaVsE
    You can also add links, photos and videos to the points in the map.

    March 5, 2011 at 9:19 AM 
    Blogger Unknown said...

    15.07.17daigege
    christian louboutin sale
    fitflops sale clearance
    coach factory outlet
    coach outlet online
    burberry handbags
    ray ban outlet
    burberry sale
    longchamp handbags
    tory burch outlet online
    nike tn pas cher
    mont blanc pen
    chaussure louboutin
    coach factory outlet
    michael kors handbags
    burberry outlet
    pandora jewelry
    oakley sunglasses
    coach outlet
    ed hardy clothing
    chanel online shop
    chaussure louboutin
    rolex watches
    ralph lauren outlet
    coach outlet
    oakley sunglasses sale
    michael kors bags
    pandora charms 2015
    tory burch shoes
    abercrombie outlet
    tory burch outlet
    cheap jordans
    ed hardy
    toms outlet
    hollister clothing store
    christian louboutin outlet
    air force 1
    chanel outlet
    michael kors handbag
    chanel handbags
    cheap oakleys

    July 16, 2015 at 10:21 PM 
    Blogger Unknown said...

    Having read this I believed it was rather informative
    http://www.prokr.net/2016/09/spraying-pesticides-anti-insects-company-in-qassim.html
    http://www.prokr.net/2016/09/pesticides-spray-anti-insect-company-riyadh.html

    February 3, 2017 at 10:36 AM 
    Anonymous Anonymous said...

    pandora jewelry official site
    pandora charms
    pandora jewelry
    pandora bracelet
    pandora charms
    pandora uk
    pandora
    pandora jewelry
    red jordan 11
    jordan 11 red
    2018-0403y

    April 12, 2018 at 7:56 PM 
    Anonymous Obat Tradisional Radang Tenggorokan said...

    Thanks for the information, this is very useful. Allow me to share a health article here, which gods are beneficial to us. Thank you :)

    Pengobatan efektif Menghilangkan Benjolan di Payudara
    Cara Mengobati Sakit Dada secara Alami
    Cara Mengobati sakit Telinga Secara Alami
    Penyebab Ginjal Bengkak dan Pengobatannya
    Obat Radang Gusi (Gingivitis)
    Pengobatan Gagal Ginjal Tanpa Cuci Darah

    June 29, 2018 at 8:31 PM 
    Anonymous Cara Alami Untuk Mengobati Batuk Kronis said...

    Very Nice Blog Updation Keep Updating !!

    Cara Mengobati Penyakit Gagal Ginjal
    Pengobatan Penyakit Insomnia
    Cara Paling Ampuh Mengobati penyakit Hipotiroid

    Cara Mengobati Penyakit Usus Buntu
    Pengobatan Kelenjar Tiroid
    Cara Mengobati Penyakit Ambeien Sampai Tuntas

    July 31, 2018 at 12:29 AM 
    Anonymous Obat Luka Bernanah Bekas Caesar said...

    This article is interesting and useful. Thank you for sharing. And let me share an article about health that God willing will be very useful. Thank you :)

    Obat Penghilang Nyeri Pada Payudara
    Pengobatan penyakit Meningioma
    Perawatan kesehatan mata
    Bahaya Tenggorokan Nyeri
    Pengobatan Kaki Bengkak secara Efektif
    Cara Menghilangkan Benjolan di Kepala

    October 3, 2018 at 5:59 AM 
    Blogger Unknown said...

    her latest blog replica designer backpacks site web Ysl replica bags image source replica bags china

    May 21, 2022 at 1:30 PM 
    Anonymous Anonymous said...

    Smm panel
    SMM PANEL
    iş ilanları
    instagram takipçi satın al
    Hırdavatçı
    BEYAZESYATEKNİKSERVİSİ.COM.TR
    SERVİS
    Tiktok Para Hilesi

    May 27, 2022 at 7:11 AM 
    Anonymous Anonymous said...

    smm panel
    Smm panel
    iş ilanları blog
    instagram takipçi satın al
    hırdavatçı
    HTTPS://WWW.BEYAZESYATEKNİKSERVİSİ.COM.TR/
    servis
    tiktok jeton hilesi

    May 31, 2022 at 11:29 AM 
    Anonymous Anonymous said...

    ataşehir lg klima servisi
    pendik lg klima servisi
    pendik daikin klima servisi
    kartal arçelik klima servisi
    beykoz samsung klima servisi
    üsküdar samsung klima servisi
    çekmeköy vestel klima servisi
    ataşehir vestel klima servisi
    çekmeköy bosch klima servisi

    June 4, 2022 at 4:26 PM 
    Anonymous Anonymous said...

    replica zara bags navigate here l6c10o0p82 replica bags wholesale in divisoria basics i5w45i2u02 replica louis vuitton bags replica bags lv p0v21b6y54 replica prada nylon bags replica gucci bags v7n68z9h56 7a replica bags philippines

    July 19, 2022 at 6:08 AM 
    Blogger stesle said...

    d0p58a3q34 b9x42o0u47 m0u06k5e06 w1g56t3t25 w2s42g7c45 t1q93z8s97

    August 22, 2022 at 11:58 PM 
    Anonymous sportsbet said...

    Good content. You write beautiful things.
    mrbahis
    hacklink
    taksi
    hacklink
    korsan taksi
    sportsbet
    vbet
    mrbahis
    vbet

    December 13, 2022 at 7:24 PM 
    Anonymous sportsbet said...

    Good content. You write beautiful things.
    taksi
    hacklink
    hacklink
    vbet
    mrbahis
    korsan taksi
    vbet
    mrbahis
    sportsbet

    December 23, 2022 at 9:57 AM 
    Anonymous hacklink said...

    Good content. You write beautiful things.
    hacklink
    korsan taksi
    sportsbet
    vbet
    mrbahis
    sportsbet
    vbet
    taksi
    mrbahis

    December 28, 2022 at 11:39 PM 
    Anonymous yunus said...

    artvin
    ağrı
    ağrı
    tunceli
    hatay

    56NE

    August 1, 2023 at 1:40 PM 
    Anonymous Bahri said...

    yurtdışı kargo
    resimli magnet
    instagram takipçi satın al
    yurtdışı kargo
    sms onay
    dijital kartvizit
    dijital kartvizit
    https://nobetci-eczane.org/
    LJUUMJ

    August 3, 2023 at 10:53 AM 

    Post a Comment

    Subscribe to Post Comments [Atom]

    << Home