3

We have a website that uses the Google Maps static maps functionality to embed maps into pages. This works with no problem; we just use something like this:

<img src="http://maps.google.com/maps/api/staticmap?zoom=15&size=512x512&maptype=roadmap&markers=color:red|label:H|42.038322,-87.680260&sensor=false" />

We are now creating a mobile site for the same client. The code itself will still work, but I'm wondering how to make sure I get a map that doesn't take over the entire screen, but is still readable. Is there a standard size that's used for mobile screens? I'm guessing with the static maps there's no way for a user to click to zoom in if we use a small size, but the regular API requires javascript and a lot of mobile browsers still don't support it.

Any ideas?

Improve this question
1
  • We use fullscreen maps except for a small "back" button shown as a strip along the top. This avoided having to make different versions for different mobile browsers (the multitude of aspect ratios is maddening). A static image backup in-case of Javascript problems is used as well. After user-testing the fullscreen-esc version was easier to use, but judging from your question this is not the answer you want.
    – Metalshark
    Commented Apr 18, 2011 at 11:10

1 Answer 1

Reset to default
2

One of the ways you can prevent your site & the static map from appearing too out of proportion is to use the viewport meta tag:

<meta name="viewport" content="width=780px"/>

This would tell a mobile browser to try to display the page with a viewport of 780px, or scale it if the device resolution is smaller than that.

There are several other options available in the viewport meta tag that may help you make sure your site doesn't get too squashed when viewed on a mobile browser.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.