Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

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?

share|improve this question
    
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 Apr 18 '11 at 11:10
add comment

1 Answer

up vote 1 down vote accepted

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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