Custom GMap Solution for Dynamically Updated Markers (Part 2)

In my previous post, I talked about how I implemented the dynamic marker system on OffRoadAtlas.com. In this post, I'll cover the functionality that the PdMarker adds to the site.

When you first hit the home page of the site, you'll see that the main content area is separated into two main sections: the narrow column to the left of the map (I call this the "info column") and the map itself.

The idea behind the info column is that as users click on markers on the map, instead of the standard GMap info window, a very brief summary of the marker is added to the info column. As new markers are clicked, its information is added to the info column. This allows users to see everything they've clicked on. It is this kind of map/page interactivity that PdMarker makes possible. To top it all off, creating a PdMarker is virtually identical in code to creating a standard GMap marker:

var m = new PdMarker(new GLatLng(marker.latitude,marker.longitude), marker.opts.icon);
m.setTooltip(marker.title);
icon = Drupal.gmap.getIcon(Drupal.settings.gmap[mapid].gmap_dynamic_hover_marker,0);
m.setHoverImage(icon.image);

Another thing you'll notice is that when the mouse pointer hovers o marker, the marker changes color and the marker's name appears as a hover tip. This is a feature that is built-in to PdMarker.

Conversely, when a user's mouse hovers over an area title in the info column, the corresponding marker in the map is highlighted and its hovertip appears. Again, this is due to PdMarker.

All of this functionality occurs due to the fact that PdMarker has the ability to assign a unique HTML "ID" to each marker element. Then, when the marker is clicked on, it is relatively easy to use jQuery to prepend the marker's information in the info column:

var new_desc = '


';
$('.gmap_dynamic_markertext').prepend(new_desc);

At the same time, a hover event is attached to the marker's information in the info column:

$('.markerdescid' + marker.nid).hover(
function () {
$(this).addClass('highlight');
marker.marker.showTooltip();
icon = Drupal.gmap.getIcon(Drupal.settings.gmap[mapid].gmap_dynamic_hover_marker,0);
marker.marker.setImage(icon.image); // change graphic
marker.marker.topMarkerZIndex(); // bring marker to top
},
function () {
$(this).removeClass('highlight');
marker.marker.hideTooltip();
marker.marker.restoreImage();
marker.marker.restoreMarkerZIndex();
}
);

There's a few other things happening in the "click" event for a marker that makes the code a bit hard to read. If a marker has already been clicked on (and has an entry in the info column) instead of adding a new entry, the info column scrolls to put the existing information in view. Also, if the info column is already long enough to require scroll bars, the code automatically scrolls the window to the top before adding the new information. All this scrolling code (and its associated easing functionality to make is less "jumpy") is a bit cumbersome.

In the next post, I'll talk about how I implemented the auto zoom/centering on each user's location based on their IP address.