Mapping Wildlife Crossings with Google Maps A.K.A. How to Embed an Interactive Google Map in Blogger

There's an easy way to add interactive maps to your website using Google Maps, and I'm about to show you how.

Let's use the potential wildlife crossing at Liberty Canyon and California's 101 as an example. This area has been on wildlife biologists' radar for many years now, since it serves as an important connection for wildlife moving between the Santa Monica Mountains National Recreation Area, the Simi Hills, and the Santa Susana Mountains. In fact this area is a hotbed of wildlife vehicle collisions, including collisions that have killed a number of the rarest, coolest creatures in those hills, mountain lions. Researchers who've have been tracking the mountain lions for over a decade have documented only 1 lion that crossed the 101 in this area- and lived to tell.

Clearly, if we're going to write about this location, we need a map of the area in our story. Below is an example of a "static" map that the Santa Monica Fund features on their website to point out the area where a safe crossing for wildlife should be built.

Not bad, right? But like I said, this map is static, meaning its not much different from an image, except that its an image of a map. So let's say we want to be able to zoom in and out on the map, pan around, find our favorite hiking trail, examine things more closely, or just "interact" with the map in general. That's where Google Maps comes in. Google Maps are interactive by nature.

To add a Google Map, we'll follow these steps:

1. Open a new tab and go to Google Maps. Type in the location you wish to display in the search bar. In this case, I'll type "Liberty Canyon Rd, Agoura Hills, CA"
2. Now a map of the area is displayed where I can zoom in and out, pan up, down and all around, and even toggle between satellite imagery and a more traditional map. I'll move around the map until I get it centered the way I want it to appear in my blog.
3. Once I have the map looking the way I want to display it in my blog, I move my cursor to the bottom right of  map, click on a gear-shaped icon, then select "Share and Embed Map."
4. In the dialogue window that appears, I select the Embed Map tab, then Ctrl-C to copy the code that appears.
5. Returning to Blogger, I use Ctrl-V to paste the code in my post....and Voila, a map appears. *To make any edits to the code, be sure to use the HTML viewer option in Blogger.

I just embedded an interactive map in my blog and I didn't even have to open any GIS software. Pretty slick, right?