Question

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.

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