Making cool maps on your site with Google Maps
August 30, 2007 – 10:14 pmToday at Mt. Bethel we launched a Google Map that shows all of our upcoming events, with each one being clickable to the details for that event. Here I’ll explain how it was done.
First, take a look at the source code on the map page. All we’ll do here is create an iframe to show the map. This is the line in question:
<iframe align=”center” name=”mapframe” src=”http://www.mtbethel.org/mapiframeevents.php” frameborder=”0″ width=”560″ scrolling=”no” height=”710″></iframe>
I’ll point out a few things. The most important is the “src”. That’s pointing to the file that does the grunt work. Also notice the height and width. I make each of those 10 pixels larger than the map itself, because if you make them exactly the same it tends to cut off the edges a little bit.
That page is pretty easy. Now let’s look at the code used to generate the map. It’s somewhat confusing, but you’re free to copy and paste my code and only have to worry about making a few changes. Start by looking at the source code on the iframed map page. I would suggest copying it exactly and creating the file on your server. Now I’ll show you what you need to change.
First, take a look at the title, which is currently:
<title>Mt. Bethel United Methodist Church - Upcoming Events</title>
You’ll obviously want to change that to your church.
The next line is the most important on in there. This includes the API key, which is different for every site. If you don’t change that to match your URL, this won’t work at all. Fortunately, it’s free and easy to get your own key. Just visit this page, agree to their terms, provide your URL and you’ll get the key. Then, just change everything after the “key=” part of that line to your own key.
Next up, a few lines down are the definitions for the size of the map:
<div id=”map” style=”width: 550px; height: 700px; border:1px solid black;”></div>
As I said before, I typically make the width and height about 10 pixels smaller than the sizes in the iframe code on the other page.
The next 11 or so lines define how the map looks, in terms of zoom bars and stuff. The only one you need to mess with is this line:
map.centerAndZoom(new GPoint(-96.677013, 24.159677), 13);
That tells it where to center the map when it first comes up. Typically you’d have it center around your church, but I have it center south of our church so people can see the events south of the US. The “13″ is what zoom level you want the map to start with. “1″ is zoomed all the way in — “19″ is zoomed all the way out. Our “13″ tells it to start zoomed out pretty far, but not all the way.
Next, you’ll see three functions, named “createMarker”, “createMarker2″ and “createMarker3″. These are used to generate the pushpins on the map. You typically only need one, but the three of them do different things.
createMarker is used to create a normal marker on the site
createMarker2 is used to create our church icon on the site
createMarker3 is almost identical to createMarker, but it has a line in it to put an icon inside the information bubble of the pushpins.
To start with, ignore 2 and 3 and just use the normal “createMarker”. I’ll explain what I mean in a minute.
After that, you’ll see a whole bunch of three line chunks, such as this:
var point = new GPoint(-82.459259,27.976211);
var marker = createMarker(point, “Middle School Choir Tour”, “February 16-19, 2008″, “939″, “Middle-School-Choir-Tour”);
map.addOverlay(marker);
These are what actually creates each pushpin. You’ll notice the second line tells it which “createMarker” to use.
The first line is the latitude and longitude of the pushpin. To get that information:
- Go to Google Maps.
- Search for the address you want to find.
- Once you have it, click on the “Link to this page” link just above the map on the right edge.
- Copy and paste that code into Notepad (or Word, or some text editing software).
- It looks something like this:
- http://maps.google.com/maps?f=q&hl=en&geocode=&
q=4385+Lower+Roswell+Rd+SE,+Marietta,+GA+30068
&sll=37.0625,-95.677068&sspn=48.240201,82.265625&
ie=UTF8&z=16&iwloc=addr&om=1 - Don’t let it freak you out. Just look for the numbers that look like coordinates. In this case they’re “37.0625″ and “-95.677068″.
- I can never keep track of which one is lat and which one is lon, so try them in both orders and see which one works.
The middle line is where you pass your text to the point. In my case, we send “point” (which contains the coordinates you just entered), then the event name, event date, event id, and event name to link. You can tweak the “createMarker” to handle that information any way you want. In our case, we use use the event name as the name of the pushpin, then show the event date in italics, then use the event id and event name to link to build the URL of that page.
That’s really about it. Just keep making more of those event groupings at the bottom for as many events as you want. If you have the information in a database, you can use PHP to loop and keep spitting those out.
I know this is a lot to digest, so try just copying our code, changing the API key and seeing if it works. From there, play around and see what you can do. If you have questions, just leave a comment and I’ll be happy to help.
Mickey
