plebeosaur.us

(original post: You Are Here (with Safari on iPhone))

When Google updated their Maps JavaScript API V3 last summer, they apparently did a bit more than change the way our iPhone map marker image was displayed (now as a background image rather than an image element). When I noticed the API change, I modified the CSS selector to hunt down the new marker: #map_canvas div[style*="blue_dot_circle.png"]. This allowed us to apply the CSS animation to the marker easily enough but it created another problem.

Since Google also inserted a phantom layer for the cursor pointer and title attribute that shares the same image background as our target marker, our new CSS selector actually applies animations to 2 markers; including one not normally seen because its opacity is set to 0.01. Worse yet, the primary marker seems to be shifted off the phantom marker by -10px top and left—but only on mobile Safari (the markers are centered just fine in Firefox 3.6 as you can see in the Firebug screenshot above). This created the ungainly double pulsing markers that some of you noted in the comments.

To kill the phantom, I tried a few parameter changes in the Maps script but nothing seems to stop the phantom (by the way, it’s not a shadow—I already turned those off). So it seems the only recourse is to de-animate the phantom marker layer with another CSS hack. Remember that the phantom layer that had the cursor and title attribute in it? We can use one of those attributes in another selector to isolate the phantom and remove the animation: #map_canvas div[title="I might be here"] {-webkit-animation-name: '';} (just make sure you match the title in this selector with the title you provide in the Maps script). We can use that information to enhance our selector to exclude the phantom layer (the one with a title attribute) from the animation with a little negation pseudo-class action: #map_canvas div[style*="blue_dot_circle.png"]:not([title]) (for more info on CSS selectors, check out Taming Advanced CSS Selectors).

Here’s the new complete CSS stylesheet for our Map app:

@-webkit-keyframes pulse {
  0% {
    opacity: 1.0;
    -webkit-transform: scale(1.05);
  }
  40% {
    opacity: 0.25;
    -webkit-transform: scale(0.85);
  }
  100% {
    opacity: 1.0;
    -webkit-transform: scale(1.05);
  }
}
#map_canvas div[style*="blue_dot_circle.png"]:not([title]) {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
}

Note that I also added scaling to our pulse transformations in this round of edits to swell and shrink the circle just as in the native iPhone map app.

As always, thanks for your comments and please let me know if you’ve found a better way to rid the phantom marker.