Develop Reference

How has <IMG> element and it's containing <DIV> moved (Left, Top) without also moving/taking its SRC (Google Maps Marker)

I really hope this is a case of can't see the wood for the trees, because I just can't believe my own eyes at the moment! If you look at the image below you'll see my mouse pointer is hovering over a an IMG tag in the Chrome Debugger/Inspect Elements tab, and the handy tool-tip in the mobile display is usefully showing "img 45 x 40" exactly where my hg.png image should be rendering. Yet Hansel and Gretal are still stuck where they were before the: -
HandG.setPosition(path[currStep]);
See https://github.com/RichardMaher/Brotkrumen/blob/master/HandleMap.js line# 321 for complete example.
How can this possibly be? When can the SRC attribute completely divorce itself from its IMG tag?
This didn't used to happen a few years ago (trust me :-) Has there been some optimization in Chrome? Buffering Map Marker moves? Can I turn this behaviour off?
The "optimize" marker option is set to false. Anyway surely we can just forget Google Maps here, this is just a basic HTML DOM issue right?
NB: PLEASE keep your opinions on the wisdom or otherwise of relying on how Google Maps renders markers. I consider myself suitably chastised and if you have a better way to smoothly transition markers from point to point over a set period of time then please mail me directly. What I'm asking is what witchcraft (my destination marker is a itches hat :-) is at work here.
Edit 1
I'll investigate the FF debugging options but am really leaning towards a novel Google Map optimization because the first leg of the trip completes as expected but then my polygon.setPath and my marker.setPosition calls don't take effect progressively. The marker(img) moves after 2 more legs (then on the final leg) and no further path is plotted till the last leg completes.
Edit 2
Please Note: - The https://github.com/RichardMaher/Brotkrumen repository can be cloned by anyone! Just stick it in a internet facing folder/directory and go for "https://your.domain/TravelManager.html" You'll need a Google Maps API key to use the maps and at least a couple of GPS readings before you can press "Arrive".
Thanks to #Bravo I ran it on FireFox(1) and got a slightly more illuminating response. It does now look like a coding issue (event race condition or some such) as the pattern displayed was: -
The first leg (as with Chrome) Transitioned from A to B in correct time.
The second leg was skipped then HandG floated up to the third geolocation position but with what appeared to be a combined duration?
Likewise, the 4th leg was not visible but the 5th was peachy.
Unlike Chrome the progressive path was in sync with the marker.
So, yes, it looks like my code is firing 2 events before the browser can give me a Transition and acompanying transitionEnd.
(1) I have work to do on FF asthetic compatibility :-( also (I'm not asking you to teach me FF debug) with Chrome remote USB debugging I get to enter the URL on my PC and it appears in the phone's browser. I can then unplug it, go for a walk around the block, connect it back to the USB again, press "inspect" and have full debug sesion going. On FF I just entered http://localhost:1234 into the phone browser and it activated but I couldn't see how to get a debug session happening.

Please feel free to delete the question because, as pointed out by #Bravo, it is a red-herring :-(
The only take-away is: - There are now at least two of us who now strongly recommend using FireFox to debug youre mobile Web Apps and avoid Chrome!
Once I could believe my eyes again, I realized I was getting 2 transitions for my marker reposition. Property Height, Width;
It is with hand on heart that I tell you that several years ago I only got one transition for the multi-property but that's neither here nor there. We are where we are.
Thanks again to https://stackoverflow.com/users/10549313/bravo

Shareaholic Social Bookmarking Errors

I've used shareaholic in the past and found it pretty good but they must have recently changed their formats which look great but are not functioning properly on my website.
The problems are:
The bookmarks are only showing the first row (not clearing the top row to show the second)
It's adding a background color to all of my links
Any ideas what the problem is and solutions?

I have the exact same problem..... I think Shareaholic is going down the toilet... Just look at what they did to 7.2. A very simplistic and stupid plugin. 6.1 was way better!

How to optimize MarkerWithLabel on google maps when having too many markers

I have been developing an application on google chrome, and I've been using the MarkerWithLabel library, which i believe is written by google developers. I am using a little over 100 markers on the map and it seemed to be pretty smooth until i checked in firefox (and lets not even mention IE). It is pretty damn laggy in FF. Any way to optimize it?
http://jsfiddle.net/zDTNS/2 Here is a sample in jsfiddle
To clarify, having 200 regular markers works fine. The problem shows up when using MarkerWithLabel

Generally speaking the best way to optimize any Google maps application is using a clustering technique. As the application loads more and more markers the client-side rendering over-head will only increase. The addition of labels only compounds the issue.
A number of clustering techniques exist and are simple to implement, I'd suggest starting with this article: https://developers.google.com/maps/articles/toomanymarkers.
Edit Leaving above in place in case anyone doesn't have the same spec requirement, but similar issue.
My only other suggestion would be to turn off the labels when above a certain zoom level? This will at least alleviate some of the worst of the rendering issues.
Edit After doing a bit of research the library introduced here has been shown to have far more favorable performance characteristics than markerWithLabel. It relies on a html canvas though so is ie9+.

After spending 2 weeks researching and trying all sorts of methods, most suggested on here, I arrived to the conclusion that there just is no way to optimize at the moment. For some reason firefox struggles when there are divs on top of the map and keeping them in sync. The performance on the latest firefox was almost the same as IE8.
I found that having a ton of google markers does not cause any lagging, but divs do. What I ended up doing was create a server side function that converts text to png. When initializing the google marker, you make the icon url TextToImage.aspx?text=Hello&size=13
Then I set the anchor of the new marker to (15, 15) and that became my new 'label'. I added some click and mouseover listeners to the label marker and voila! Insane improvement to performance.

If you only want a couple of characters inside a pin, another alternative is:
https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=${displayCharacters}|${pinColorHex}|${fontColorHex}
Check this example.

Google Maps API v3... non-mobile?

I'm trying to make a Google Maps widget for my website but all of the examples are for full-screen mobile devices. The tutorials work when I copy paste them exactly as shown but they don't seem to work when I want them to only occupy a portion of the page.
From what I've read, the v3 is the best API yet (for what I need) because of its speed and compatibility with mobile devices. I plan to make a widget very similar to the MarkerClusterer example from the demo gallery but I can't get it working.
Is this a common issue? I know I'm being vague but I would appreciate some help.
Thanks

One minute after I post this question, I find the problem...
The examples have the map_canvas div set to width:100%;height:100% which I have changed as follows:
Hope this helps somebody after me...

Weird black spots on custom Google Map with IE

I'm getting some weird black spots with a custom map page (via the Google Maps API v2.x) I have created. (Click SERVICIOS and then the icon farthest south to generate image shown below.) The issue seems to only appear when using Internet Explorer. I'm wondering if this is a common problem and if there is a common fix?
Any ideas?
Thanks.
UPDATE
In this picture the browser is IE 8.0.6001.18702
Its hard for me to get specific details about the computer because my client took this screenshot, I have been unable to reproduce these black spots.
removed dead ImageShack link

This is completely related to the zooming feature in IE8. Ask your client to set his zoom level back to 100% and the black spots magically disappear. This is probably why not everyone can reproduce this problem, because it's a local browser setting. But even now (months later), when I follow your link -- or if I simply go to maps.google.com, do a search, and get the Marker/InfoWindow -- if I have the zoom level set to > 100%, I see those black shadow pieces where Google's javascript is trying to piece together the drop-shadow. So QED: Microsoft STILL has a bug in their scaling algorithm for transparent PNGs in IE8.
Weird black spots on custom Google Map with IE http://img340.imageshack.us/img340/751/googleblackholes.jpg

This black (png?) bug might be related to this issue:
IE 8 Black bug
What version of IE are you running? (Note that only some part of the drop shadow seems to be affected.)

I failed to reproduce this error (IE6,7,8,FF,Chrome), but I can offer you to try GMaps Utility Library. It allows to create custom info windows using css (live example that use ExtInfoWindow library extension). This library adds you an opportunity to create info windows without transparency which I think is a current problem.
I've tryed to look what google map API doing with info window at IE8 and found that it add CSS filter:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="http://maps.gstatic.com/intl/ru_ALL/mapfiles/transparent.png");
Wich reproduce shadow under the info window based on transparent png image, maybe at your client computer this opportunity (filter) disabled, so I think the best solution is to use library i suggested.
Also you can try ie7-js library that has IE-PNG fix transparent functionality.

I had this blackspot too. It is generated by the <li>.
Remove the <li> and </li> around the affected area and it will disappear.