The Daily Jenn

As you may or may not know, February 26th was my brother Jody Wirawan’s birthday. Anita had already told me that she wanted to do something special on his website to commemorate the day, and to help keep his memory alive. I had no idea what that was, until about a week before, when I came home to:

“Hey honey, you want to see what I’m doing for Jody’s birthday?”

“Yeah, whatcha got?”

“Check this out!” (shows me a basic version of a google map API with points on the map representing places Jody had been/lived)

I LOVED IT! I thought it was a great idea for his website. Not only had Jody loved to travel, but Anita loves maps, so it was a great thing for her to do for him.

First off she found some of what we needed at Mike Williams’ Google Maps API tutorial. Anita wanted to combine some of the aspects of the tutorial, and she asked me to help her. Being as some of the coding took me a while to figure out, I thought I would share here for anyone who might be trying to find the same thing.

1. Tabbed Markers

Anita wanted Tabbed Markers. They look really cool and the final map and really help you add different types of information without taking up too much space on the users screen. However, The code for the “TabbedMarkers” and for the “Markers” was a bit different, and took me a bit to figure out.

The problem was that the “Tabbed Markers” code does not allow for the markers to show up in the nifty sidebar she had created. The sidebar needed the marker to have a name and not just contents. To fix this, I changed:


function createTabbedMarker(point,htmls,labels)


to


function createTabbedMarker(point,name,htmls,labels)


Then I entered the following part of the code to create a corresponding link in the sidebar:



var point = new GLatLng(51.16569,10.45153);
var marker = createTabbedMarker(point,“Name here”,["contents here", "contents here", "contents here"],["Tab 1 name", "Tab 2 name", "tab 3 name"]);
map.addOverlay(marker);



After setting up all the points, it was time to enter stuff into the “contents” section (the area where all the information is). Everything was going smoothly until I tried to enter any images or links. Using images or links would cause the code to break and the map wouldn’t even load. After staring at the code for quite a while, I thought it might be the quotes (” “) around where the contents for each tab go. Being as IMG tags and link tags both require that quotes be used, I thought that might be what was causing the problem.

Just for the heck of it I tried surrounding the “contents” in apostrophes ( ‘ ) instead of quotes to look like so:



['contents here', 'contents here', 'contents here'],["Tab 1 name", "Tab 2 name", "tab 3 name"]);
map.addOverlay(marker);



And it worked! Link/IMG problem solved. (One thing to note here, since apostrophe’s are used as markers for when the code starts/ends, in order to enter an apostrophe into the text, you need to use the code ’ wherever you want one. So “you’re” would look like you’re.) On to the next one….

2. Zoom level

One of the issues with the map was that it stayed on the same zoom level from the beginning, and through every coordinate. Anita and I wanted it to start out zoomed far out to show every point on the map, but to zoom in when a point was clicked. After some research and lots of testing, I found a solution.

In the map is the code:



map.setCenter(new GLatLng(17.97873,-146.95313), 2); .



This code simply tells the map that on startup, to set center of map to 17.97873,-146.95313 and a zoom level of “2″. I knew that this was the solution, if only I could figure out how to tell the map to use that on startup, but to use a new coordinate and zoom level upon clicking on a marker.

I again looked at the code for creating the tabbed markers and added a line that tells the map to zoom in on the coordinates of the maker at a zoom level of “12″ when the marker is clicked. It worked! Here it is:



function createTabbedMarker(point,name,htmls,labels) {
var marker = new GMarker(point, myIcon);
GEvent.addListener(marker, "click", function() {
map.setCenter(marker.getLatLng(), 12);
if (htmls.length > 2) {
htmls[0] = '<div style="width:'+htmls.length*88+'px">' + htmls[0] + '<\/div>';




(that is only part of the code, for representation purposes)

I still havent figured out to make the zoom level different for each marker. That particular code simply zooms in once, and keeps the same zoom level for every marker. Pretty handy if you want to start your map zoomed out, but then get more detail when a marker is chosen. If anyone knows how to set a different zoom level for each marker, let me know!

Whats next?

3. Next/Previous Buttons

Anita and I both agreed that the map would be much more user friendly if the user could click on “next” and “previous” links instead of using the sidebar to follow the map. After some searching in the code, I found the following line (used for the sidebar):


<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a>


I realized that this is probably exactly what I needed so I added that to bottom of the marker bubble, but replaced ‘ + name + ‘ with “next” (without the quotes).

It worked amazing! The only problem was, it didn’t go to the next marker, it went to the previous one! Easy enough to fix, I changed


(gmarkers.length-1) to (gmarkers.length+1)


Voila! A “Next” Button!

As you can imagine, to make the “previous” button, I simply used the first version of the code, which caused the markers to go backwards.

I am by no means an expert at Google Maps API, but I wanted to share this information for people like me who get code, but need a push in the right direction.

Want to see the finished map? Go to Jody Wirawan’s Interactive Biography Map.

Tags: anchorage, anita wirawan, biography, coding, google maps, jennifer grattan, jody wirawan

Feed for this entry. You can skip to the end and leave a response. Pinging is currently not allowed.