Google maps, marker bouncing and jQuery

[Sherlock]

Wanted to share some pain and results.

Feature at hand is to make GMap markers (custom images) bounce up and
down based on external event.

Earlier implementation was targeting undocumented APIs, hence was
breaking every time Google changed version which happens relatively
frequently.
Here it is with comments.

bounceMarkerOld: function(marker) {
if (G_API_VERSION != this.G_API_VERSION_TARGETED) return;
//we want to disable bouncing and possible exceptions if run-
time GMap API version doesn't match targeted one
if (!marker) return;

/* since this code block relies on undocumented features of
gmap api's
* it is essential to replace functions with new names when new
version comes out. This will occur dynamically if v=2.x is set.
* Since google obfuscated their API's task becomes to search
for specific "signatures"
* and replace code base with found results.
* get script by running http://maps.gstatic.com/intl/en_us/mapfiles/[x]/maps2.api/main.js
replace [x] by result of G_API_VERSION
* example: http://maps.gstatic.com/intl/en_us/mapfiles/160f/maps2.api/main.js
* Comments below will specify search phrase for each function
in question.
* Names below are valid for v2.163d.
* Make sure to update G_API_VERSION_TARGETED.
**/
try {
if (!marker.ob) { /*
[.draggable=function(){return] look for what is being returned that's
your guy */
marker.ob = true;
marker.Ow(false); /* [("marker");if]
name of the function is what we need */
}

marker.Qa = 30; // Current height /* [!=0)return l;]
property being tested is your target */
marker.Oh = 30; // Max height /* [.iconSize||new]
returned property from a function on a NEXT line */
marker.gg(); /* [this,"dragend"]
name of the function is what we need */
} catch (err) {
log('error occured during marker bouncing! ' + err);
}
}

As you can see properties such as "ob", "Ow", "Qa" and so on were
continuously changing with new releases due to obfuscation, which
prevented our code from running.

Since we couldn't target specific version, due to Gmap's nature of
running over HTTPS, and pain of adjusting for new releases was getting
annoying, another solution was proposed. Idea was to dynamically
reflect upon all marker's properties, pick a correct one and manually
play with attributes to achieve desired visuals. After some struggle a
working solution is presented below

bounceMarker: function(marker) {

/* This is alternative to google's implementation for marker
bouncing,
* which does not rely on undocumented (and ever changing due
to obfuscation) APIs.
* Code needs to locate property which references DOM element
<IMG> responsible for marker's icon.
* marker.getIcon() is not good since it returns object
wrapping actual image.
* Then we use jQuery's animate() function to play with icon's
position.
* We must be carefull to pick correct property and skip
everything else. Once property is found and animation performed
* we can break out of the loop.
* In G_API_VERSION 164e this property is "Gr".
* Seach for ["updateInfoWindow"], identifier in front of it is
our guy.
***/
try {
for (var prop in marker) {
//debugger;
if (marker[prop] == null) continue;
//if (marker[prop].toString() != "[object
HTMLImageElement]") continue; doesn't work in IE since it prints
"[object]"
if (typeof (marker[prop]) != "object") continue;
if (marker[prop].tagName != "IMG") continue;
if (!marker[prop].id) continue;

var id = marker[prop].id;
log('property representing icon is [' + prop + '] icon
id: ' + id);
var img = $("#" + id);
var old = img.position().top;

img.animate({ top: old - 20 + 'px' }, 250, 'linear',
function() {
img.animate({ top: old + 'px' }, 250, 'linear',
function() {
img.animate({ top: old - 10 + 'px' }, 200,
'linear', function() {
img.animate({ top: old + 'px' }, 200);
});
});
});

break;
}
} catch (Error) {
log('error occured during marker bouncing! ' + Error);
}
}


One more word, jQuery's animate() function is very VERY cool