For Maps Sake

Recently Steven contacted us and told us that he was doing inventory and noticed the RCDE locations map was still on his Google account and asked that it be moved to someone’s account that worked at USU still. I was the obvious choice and he exported the map and I imported it into my account. I updated our page but forgot to tell everyone else. This was mainly because I didn’t realize everyone was using the same map. I decided this would be a good idea to write a short note on how to create or alter these maps on your pages and diagnose issues with them as I had to do when I noticed the A’s were all missing on the campus sites.

How to Generate a New Map

…or alter a current one.

The current use of Google Maps on our sites is simply to embed the map in an iframe on the pages. This method is by far the easiest but also the least flexible. In order to generate a new map for your site based on our current map show at http://distance.usu.edu/locations.cfm, first go to that page and click on the link below the map that says: View Utah State University Regional Campuses & Distance Education in a larger map. This link will take you to a Google Maps page.

No need to do anything just yet. Any zooming or moving around on the map will not have any effect on a map you are creating. First click on the chain icon in the upper-left corner just below the search bar.

embed button

click the chain to embed a map

Clicking this button will bring up a box where you want to click “Customize and Preview Embedded Map.” After you click that link, then the fun begins. You have a few options, the first being map size. The “Large” size should be sufficient for most needs, but you can also do a custom size if you like. Also don’t worry because even after you embed this map on your page, adjusting the size slightly is pretty easy.

After you choose your size you will want to zoom in and position the map as you see fit. You mouse wheel doesn’t work to scroll here but dragging does work to move the map center around. Zoom in as far as you would like and get the center of the map just where you want it. If you notice, as you move the map around and zoom, the code in the box below the map will update dynamically. After the map is in just how you want it, copy the code below the map and go into the page you want to edit and paste it in there.

The map should show up just how you want it.

Dissecting the iFrame Code

While the code looks like a bunch of gibberish, once you know what each part does, it makes it easier to edit you map if you need to, without going through the process we just did. Think of the iframe as essentially a box that holds external data. In the Google maps case, the map will fill whatever area the iframe takes up. So the first part of the iframe has a width and height values. After you embed the code and think you want the map a bit bigger or smaller, you can just tweak those numbers and the iframe will change sizes and the map will fill the appropriate area.

Now if you were to hit the chain icon and only choose a map size without messing with the zoom level or center positioning of the map you won’t see these next items. As you moved the map around and changed the zoom level you may have noticed the copy and paste code below the map changing. In fact there were three variables that showed up that wouldn’t have existed if you hadn’t moved the map around. Those variables in the URL are: “ll” “spn” and “z”. You might be able to guess what those mean, but it’s sometimes tough to do so.

A quick Google search would return this page listing the Google Maps Query String Parameters. This page explains that the ll variable is the longitude and latitude of the map’s center point. So after you embed the map, if it isn’t exactly centered how you wanted it you can just tweak these numbers ever so slightly to re-position the center. This is helpful if you find you may want to make the map longer or taller and after doing so you realize that the center is no longer in the center how you had imagined.

The spn variable is not really needed, and in fact your map will display just fine as long as you have the z variable in the URL. Essentially the spn variable is the span of the map. It is written as longitude and latitude and if there was no z variable, the map would try to span the distance given with these points. I really don’t understand trigonometry so I won’t pretend to know how to calculate that. The z variable is the zoom level. As long as you specify a zoom level you won’t need to worry about specifying a span. If you get your map embedded and decide you want to zoom in or out a bit more, just increase the number to zoom in and decrease that number to zoom out. I believe the zoom level has to be positive integers so no decimals.

The msid number, in our case is the map id number. If you were to just embed a regular Google map straight from the google.com/maps page I don’t believe there would be an msid. Our map however has custom markers that we have setup and that data is pulled in, in the msid. To get the msid of another map just visit that map in your browser and check the URL. You could in theory replace and existing map msid number on your page and that map would be used in place of the current one, and still preserve your zoom and positioning.

Plan Ahead

The best way to not have to fiddle with all this maps jargon is to know the size of the map you are going to want to embed ahead of time, as well as how zoomed in you want it to be and where you want it to be positioned. It’s much easier to just fiddle with the Google maps embed tool rather than doing it yourself, but now you know how to do so if you didn’t before.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: