1

I have to embed Google Maps on a web page for a client.
I would like the map to show a marker which displays the exact location of the client's business, as well as a summary of their details (address, web page, phone number etc).
The code I am using to do this was provided by the Google Maps website (not a third party service) and I have not modified it.
This works great in every desktop browser I have tested and the marker is displayed correctly.

However, when I view the page on an iPad, the marker is removed from the map.
Instead there is a link below the map in the form of " A. Client's Name" (where I have no idea what the A. stands for). When clicked (tapped) this link does nothing. If I hold my finger on it and select "Open in new tab", it opens my client's Google Places page in a new tab, as you would expect.

Next to this link are two buttons (one of a phone, one of something else, possibly 'get directions'), which when clicked display the message "Safari cannot open the page because the address is invalid"

Here is a jsfiddle (using a random business) which illustrates my problem: http://jsfiddle.net/H2whg/

Is it possible to do anything about this behaviour in mobile safari (either have the buttons do something sensible or remove them entirely)?

Thanks in advance.

James Hibbard
  • 16,490
  • 14
  • 62
  • 74

1 Answers1

1

It does display your marker, but it's south of the area displayed by the map.

Your source is quite long:

http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Harrods,+Brompton+Road,+London,+Gro%C3%9Fbritannien&aq=0&oq=harrods&sll=51.500808,-0.143003&sspn=0.006532,0.016512&g=Buckingham+Palace,+London,+United+Kingdom&ie=UTF8&hq=Harrods,+Brompton+Road,+London,+Gro%C3%9Fbritannien&hnear=&radius=15000&t=m&cid=5481296058834203814&ll=51.515366,-0.157413&spn=0.037389,0.072956&z=13&iwloc=A&output=embed

and there are some conflicts in the iPad version. In particular, ll fixes the map centre — whereas you want your marker there. As you have z to fix the zoom, you don't need spn which defines a span to fit into the map.

Getting rid of both of those does allow the marker to be shown on the map.

http://maps.google.de/maps?f=q&source=s_q&hl=de&geocode=&q=Harrods,+Brompton+Road,+London,+Gro%C3%9Fbritannien&aq=0&oq=harrods&sll=51.500808,-0.143003&sspn=0.006532,0.016512&g=Buckingham+Palace,+London,+United+Kingdom&ie=UTF8&hq=Harrods,+Brompton+Road,+London,+Gro%C3%9Fbritannien&hnear=&radius=15000&t=m&cid=5481296058834203814&z=13&iwloc=A&output=embed

Note that the iPad implementation doesn't use an infoWindow. Instead you get a series of markers in the map, starting with A and a corresponding list below it.

Andrew Leach
  • 12,945
  • 1
  • 40
  • 47
  • Thanks very much for your help. Applying what you suggest I can now move the marker into sight. However, the link to the client's Google Places page still doesn't work (unless you open it in a new tab) and the two buttons at the bottom right of the map still give me the above error message. Is there any way to influence the behaviour of these three things? – James Hibbard May 27 '12 at 19:26
  • No idea I'm afraid (although the phone button won't work on an iPad as it doesn't have a phone). I only get the option to open those links in the Maps **app** not the browser; and although jsfiddle demonstrates something, there are no debugging tools available in Safari. – Andrew Leach May 27 '12 at 19:33