How to create an interactive Google Map

The first thing you’ll need to do is create a free Google Account. Click here to create a free Google account.

If you already have a Google Account created go to http://maps.google.com

Once you have logged into your account in the upper-left hand corner you’ll see the words ‘My Maps’.

map1

Click on ‘Create new map’ to get started building a new interactive and embeddable Google map.

Give it a title and a description so you can easily identify it the next time you want to reference it. You’ll see why this is important in a moment.

Decide whether you want your map to be displayed publicly or only with people you choose to share the map’s URL.

Click ‘Save’.

Type into the search field the address of the location you want to add onto your map.

For example, I will type in ‘Chicago’ and click ‘Search Map’ and a red balloon appears on the city of Chicago along with a bubble with more information on Google maps.

Click ‘Save to My Maps’.

maps2

(click image to enlarge)

A box will prompt you to choose the title of the map you want to save this address in. This is where you realize how and what you titled your maps can help you tag addresses faster.

The bubble will expand to include a field for you to input a description of the address.

maps3

(click image to enlarge)

This gives you an opportunity to explain why this address is important to your user.

Advanced step:

You can choose to use either plain text, rich text or HTML to add information. There is also a mini WYSWIG (what you see is what you get) editor to assist you in adding photos, hyperlink text and much more.

You can also change the icon that points to the address. Instead of a red or blue balloon you can choose from one of many Google ‘default icons’.

map4

Advanced step:

You can create and add your own icons to your Google maps by clicking ‘add an icon’.

Scroll down on the left-hand side on the Google maps where it says ‘Hide’ and un-check any addresses you might have erroneously typed to make them disappear from your map.

To embed your Google Map into a blog or Web site click on the word ‘Link’ in the upper right hand corner.

Copy the HTML code and paste it to embed into your Web site.

maps4

Advanced step:

You can customize how your map is displayed even further by clicking on ‘Customized and preview embedded map.’

Here are some fun examples of Google maps:

Report on Halted Development in Your Neighborhood

Grand Theft Auto IV Locations

myFOX Pets: Pet-Friendly Places (myFoxdfw.com has created a number of interactive Google maps you can check out)

Hilary Fosdal is the Interactive Content Manager for Barrington Broadcasting Group. You can read more of her work on Running for Food.

Email this to someoneTweet about this on TwitterShare on Google+Share on FacebookShare on TumblrPin on PinterestShare on Reddit
  • http://wnyc.org Annie Shreffler

    Thanks for including the Halted Development map link in your post. Just fyi: for the moment, we are accepting new map information in a Google form, rather than allowing people to add their own pin to the map. Keeping the map public was problematic because we were unable to make the instructions permanent and they kept getting lost, leaving people a bit confused. We’re working on a new map that will display all the data coming to us through the form.

    Annie Shreffler
    Online Projects Editor

  • http://www.elemental.co.za Elemental – South Africa Web Development

    Thanks for the post. The advanced step was something we were looking for, glad we found that.

  • http://www.my1st.in/360view Sid

    Frankly, What Interactive map i wanted was to place an animated flash icons or GIFs on a Google Map , but seems Google does not like custome Place Markers. So i decided to do two things 1) collect a map of the area i was interested which in my case are not big 2) figure out a way to place animated GIF with click-able links – This is what we made http://my1st.in/greater-noida-omaxeitc/ . Soon would require to place info on a Bigger Area map then will see how to make own zoomable Map – but somehow if your area of Map is Small or a New effective is warranted, Google Maps can be done away with.


Newest Posts

“Secret Execution” bill moves forward November 22, 2014, 9:08 pm
What impressed me about the Ted Scripps Leadership Institute November 22, 2014, 8:44 pm
Ask an expert: How to appeal a FOIA rejection November 21, 2014, 3:32 pm
Contact your senator today to pass FOIA fixes! November 20, 2014, 11:21 pm
Twitter just became a better tool for journalists November 19, 2014, 2:41 am
Highlights thru Nov. 18 November 19, 2014, 12:33 am
Region 7 Career Connections, 11.18.14 November 18, 2014, 11:46 am

Copyright © 2007-2014 Society of Professional Journalists. All Rights Reserved. Legal

Society of Professional Journalists
Eugene S. Pulliam National Journalism Center, 3909 N. Meridian St., Indianapolis, IN 46208
317/927-8000 | Fax: 317/920-4789 | Contact SPJ Headquarters | Employment Opportunities | Advertise with SPJ