mobile website : static map width and height. Possible to set dynamically for each devices?

Question

I am showing a static map in the mobile device. Code for getting the map is:

http://maps.googleapis.com/maps/api/staticmap?center=New+York,NY&zoom=13&size=600x300&sensor=false

Now my issue is with the attribute size. That is with the width & height

My application is a J2EE application. So, in the main JSP i have set the viewport as follows:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />

But I dont know how to set the width and height in another JSP. It is as follows:
-->>> Here i have hardcoded to 600x300. how to set height & widht dynamically here

<img src="http://maps.googleapis.com/maps/api/staticmap?center=<c:out value="$cityName"/>&zoom=<c:out value="$zoomSize"/>&size=600x300&sensor=false">

Any idea ?

Answer 1

If you have access to client side Javascript in your application then you can use:

// attempt to get the size from the window object
// otherwise fallback to the document body. 
var size = {
  width: window.innerWidth || document.body.clientWidth,
  height: window.innerHeight || document.body.clientHeight
}

If you're looking to find a server side solution in java(?) then see here for an example.