multijourn.files.wordpress.com · Web viewThis is where places like Flickr and various photo gallery services come in handy. UPDATE FOR #BCX: Use the public folder of Dropbox!!!

Creating a Google map mashupwith markers, images and links

You’ll need a Google account for this exercise, but I think all of you have one already. If not, it won’t take long to sign up.

http://maps.google.com/help/maps/mymaps/create.html links to a video promo about using and creating Google maps.

Go to GOOGLE > MAPS > MY MAPS > CREATE NEW MAP

Sign in with your Google account e-mail address (or create one). After doing that, fill in the info for your map-to-be. Note that you can choose to make your map private or public.

Example:

Zoom into the area you want to use and choose the type of map that suits your needs.

Tools will let you move your map, place markers, draw lines and mark off areas.

Leslie-Jean Thornton, November 2008

http://maps.google.com/help/maps/mymaps/create.html

You have design options for the markers (available after you place them by dragging and dropping):

Name the marker after you drag and drop the basic one from the tool bar.

Click on the marker icon in the pop-up window and you’ll see some of the choices (note the scroll bar for more).

You can also add an icon you’ve found elsewhere or designed yourself:


It has to already be up on the Web, however. This is where places like Flickr and various photo gallery services come in handy. UPDATE FOR #BCX: Use the public folder of Dropbox!!!

Using the “insert image” tool, I used a picture of the Cronkite School found on Google Images for demonstration purposes. You should find one that’s yours or to which you have copyright access.

I then selected the image, chose the link icon, typed in the address of the target page and clicked OK, thereby making the image a clickable link. Note the other formatting options available.

OPTIONAL: I then took the address of the map and called it up in another browser window to check it. Once I “drilled down” to the right level and clicked on the marker, I got this:


BACK TO MAKING THE MAP: If you wanted to embed a video, you would get its embed code (meaning you need to have uploaded it to YouTube or some other service first if it’s one of your own videos) and paste it into the pop-up window using the “Edit HTML” option.

Click “DONE” to save.Click on the LINK link in the upper right corner of the workpage to get the address and the embeddable code.

Click on “Customize…” for more options:


After setting them, I got the look and size I wanted:

This is the code generated by Google for embedding the map into a blog, Web page, e-

mail, etc.:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?client=firefox-


a&hl=en&ie=UTF8&s=AARTsJpXC4Y6JVzrBGIoj_dLetfW0Hjeww&msa=0&msid=100339601927291663245.00045b1c98e03a236a877&ll=33.452928,-112.073765&spn=0.012532,0.018239&z=15&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps/ms?client=firefox-a&hl=en&ie=UTF8&msa=0&msid=100339601927291663245.00045b1c98e03a236a877&ll=33.452928,-112.073765&spn=0.012532,0.018239&z=15&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>

Here’s what it looks like as I post it to my “testing” blog on Wordpress:

(With what you learned about HTML in the first week of class, you can easily see how to change the size of the map and the border right in the code…)

And here’s what it looks like published:


Here’s the popup on the path I drew:

If you want to go back and work on the map some more, sign in to your account (if you’re returning after having closed your session) and click on your map’s title in the list that will be provided. Then click on EDIT.


Say I want to go back and place a different color on an area that I’ll call the News District. In the Google workspace, I’ll use the “area” tool to draw some lines that form a rectangle.

The pop-up offers format choices, etc. I’ll name it and change the color.

This is what it looks like in the workspace. Save it by clicking DONE or SAVE.


Go back to where you’ve embedded it – in my case, to one of my blogs. Refresh the page or call it up again. You’ll see the changes:


Documents

multijourn.files.wordpress.com · Web viewThis is where places like Flickr and various photo gallery services come in handy. UPDATE FOR #BCX: Use the public folder of Dropbox!!!