iPhone Safari Geolocation Map Update

(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.

Google Maps marker layers

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:

  1. @-webkit-keyframes pulse {
  2. 0% {
  3. opacity: 1.0;
  4. -webkit-transform: scale(1.05);
  5. }
  6. 40% {
  7. opacity: 0.25;
  8. -webkit-transform: scale(0.85);
  9. }
  10. 100% {
  11. opacity: 1.0;
  12. -webkit-transform: scale(1.05);
  13. }
  14. }
  15. #map_canvas div[style*="blue_dot_circle.png"]:not([title]) {
  16. -webkit-animation-name: pulse;
  17. -webkit-animation-duration: 2s;
  18. -webkit-animation-iteration-count: infinite;
  19. -webkit-animation-timing-function: ease-in-out;
  20. }

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.

Update [April 2, 2010]

Make sure you also download the blue marker image and place it in the same directory as your map page. Sorry, I should have been more clear about that.

Update [October 31, 2011]

See Here We Are Again for the latest update in this saga!

Article: Comment Feed

15 Comments (+)

  1. Mike

    Great bit of detective work. Something tells me though that Google may not be done tinkering with maps v.3. I hope we won’t be back in a few weeks wondering what else has mysteriously changed.

    Thanks for all of your hard work.

  2. You Are Here (with Safari on iPhone) φ plebeosaur.us

    [...] I posted a fix for the phantom markers in a new post: iPhone Safari Geolocation Map Update. [...]

  3. Steve Stedman

    I updated the CSS a bit again (the old code is grayed-out above). Gotta love the :not() CSS pseudo selector. It allowed me to get rid of an extra selector that basically just undid what the first one did.

  4. Jim

    Hi,
    I am having trouble getting the map to size and center correctly when the iphone is in landscape orientation? The map is larger than the viewport thus not centering properly. Any ideas?
    Thanks and great article!

  5. Steve Stedman

    @Jim, huh! I guess I never tried it from landscape before. Until I have a chance to look into this you might want to look at the meta viewport settings. Please let us know if you find a fix. Thanks!

  6. Jim

    Thanks, I removed the initial-scale=1.0 from the meta viewport settings and it works. The only thing is the Map, Hybrid, etc. buttons are a bit larger than they need to be in landscape mode… But it does center now.

  7. Chris

    The vary latest google maps v3.4 of April 14, 2011 breaks this hack and the icon no longer pulses.

  8. Saul Gorychka

    I am really amazed. Today I spent a lot of time trying to find something interesting on this topic. Finally I found your blog. Thanks for that!

  9. Steve Stedman

    @Chris @Ben yeah looks like they changed it up again. I sure wouldn’t consider Google Maps’ for client work if this is the way they treat their developer community.

  10. Steve Stedman

    @Saul thank you! Glad to help.

  11. Barney

    Does this currently with the latest version of Google maps..Aug 2011….Cant get it to pulse…?

  12. Chris

    I found out why this does not work with the new Google Maps but don’t have the CSS skills to fix it.

    The problem is that Google API by default is now optimizing markers. They are encoded. To keep this from happening you add the following option to the marker when creating it:

    optimized: false

    This will cause the marker to be placed back in the DOM as a native element as before. Its now under an img tag in the div.

  13. Velko

    Got it working with Chris’s tip on optimized:false. Just change the CSS selector to:

    #map_canvas img[src*="blue_dot_circle.png"]

    Google now displays the image as an actual image so this will target that new tag.

  14. John

    I tried your site, but the blue_dot_circle.png does not pulse.
    Also if i change #map_canvas div to #map_canvas img and set optimized:false.
    What is going wrong?

  15. Steve Stedman

    Thanks @Chris! I added your fix to the latest, revised update.