WordPress School: Google Maps

We’ve experimented with image and video embeds in your test site in Lorelle’s WordPress School. We’ve also worked a with WordPress shortcodes in the contact form on the Contact Page, and you’ve gotten a little HTML awareness within your site’s content. Today’s assignment is another form of embed. Today, we are going to embed a Google Map.

Many sites use maps on their Contact and location information Pages to help people find their physical location, but what if your site doesn’t represent a brick-and-mortar spot on a map? How would you use maps?

• Maps are used in posts to provide visual information about the location associated with the topic
• Want to share directions to an event you are involved with?
• If you blog about a specific area or region, maps help to point out tourist sites, landmarks, and geological features
• Blog about natural science, hiking, traveling, and other geolocation topics? Maps flesh out the stories you tell.
• Publishing educational material? What is better than just talking about a volcano? Showing pictures of the volcano on a map!

I’m sure you are thinking about several ways to use maps in your site’s content even now.

The above map is not an interactive map but a graphic screen capture of a Google Map satellite view of Mt. St. Helens, an example of an educational use. Around the image is a link to the Google Map for more interactivity with the famous volcano. I’ll explain how to do this.

For an interactive Google Maps embed example, I teach an innovative WordPress course in the Web Development and Design degree programs at Clark College in Vancouver, Washington. Need directions to register?

As usual, WordPress.com makes it easy to embed a Google Map into your WordPress.com site, no WordPress Plugin required on WordPress.com, though there are Plugins for doing more sophisticated techniques with the maps.

Instead of me explaining how to do this, I’m going to let one of my students, Savanna Lord, explain in “How to Embed a Google Map” on our student magazine called ClarkWP WordPress Magazine. Please note that there is a “classic” Google Maps and a new “improved” Google Maps. Savanna included directions for both versions.

For more information on the basic embedding of Google Maps in WordPress.com, see their official Google Maps tutorial.

If you are using a WordPress Theme without the option for embedding Google Maps, and not using the Jetpack WordPress Plugin, see this method by WP Tricks on how to embed Google Maps in your WordPress Theme functions file.

There are many ways to use the Google Maps API to customize the look and feel of the maps you embed on your site. Not all of these techniques will work on a WordPress.com site, but if you are self-hosted, or moving in that direction, save these links.

Here are some example tutorials and tips:

• Embedding Google Maps in WordPress without a Plugin – Nelio
• Google Earth Outreach – Visualize Your Data on a Custom Google Map
• Plot WordPress posts on a Google Map – Toolset
• How to Add a Color Tinted Full Width Google Map in WordPress | Web Designer Ledger

How to Embed a Custom Map or Different Map?

Want to embed a map that isn’t Google Maps?

• Non-WordPress.com Sites/Self-hosted versions of WordPress:
  • There are a variety of WordPress Plugins designed specifically for map companies like MapQuest
  • Paste the embed share code of the map directly into the WordPress Text Editor
  • Using a screen capture tool, capture a screenshot of the map and save it as a graphic. You may put a link around the image so the reader will go to the map service when they click the image. Warn them of the action in the content in and around the map image or in the caption. See the example at the top of the post.
• WordPress.com Sites:
  • Provide a link to the map such as the MapQuest link to Clark College. No visual but it gets people there.
  • Use the screen capture method with a link around the image.

Assignment

Your assignment is to embed a minimum of one Google Map(s) into your test site.

The map may be on your Contact Page for information about your location. It could be on a post in your article series to feature a location or place covered in that post, such as your last post featuring links to a variety of resources and you wish to feature your favorite supply store.

Include an explanation within the context of the content about the purpose of the map such as “If you need directions to our store, use the map below.”

We will be learning more about WordPress Shortcodes as the course goes forward. They are clever ways of using abbreviated code snippets to allow programming code within your post content, sidebar, and other content-based areas of your site.

Join us in our discussions on this assignment in our WordPress School Google+ Community and let us know about how you use maps and share the link to the assignment post on your test site so we can check it out and cheer you on!

This is a tutorial from Lorelle’s WordPress School. For more information, and to join this free, year-long, online WordPress School, see:

• Lorelle’s WordPress School Introduction
• Lorelle’s WordPress School Description
• WordPress School Tutorials List
• WordPress School Google+ Community
• WordPress Publishing Checklist
• How to Give Feedback and Criticism

---