Just wanted to report that I've posted my "solution" for now on this development page: http://gis.mda.state.mn.us/maps/csgsoil_v3.htm
I report the sizes of the map div and the temperature graph image on the left, which you can see change with screen resolution and window resizing. Unfo, the whole page has to refresh if you resize the window, cuz crummy IE won't hold the map div otherwise. You can see the temperature graph gets too small to be readable if your map isn't at least 300px H x 5000 px W or so. Even that's pushig it. So I'm going more low-tech: I'm going to have the infoWindow just report the latest temperature measurement in text instead of showing a graph. Speaking of low-tech, on my problem #3, I had a thought: why not just have two divs on top of one another, one with a "loading" image, and another on top with the "final" image? If the first "loading" image is small enough to be called quickly, who cares if it's still there after the slower-loading image shows up? As long as the second image isn't transparent... Haven't tried that, since I'm ditching my images, but thought I'd offer it up as a potential solution. On Jun 24, 2:22 pm, mmdolbow <[email protected]> wrote: > Just thought I'd report some progress. Chad's link to Rob Swan's > dynamic div sizing solution works well, but of course has to be kluged > with in order to work with IE. (Even though I get to target IE7, which > is admittedly crummy but at least not as bad as IE6.) > > As for sizing the graph inside the infoWindow, I'm having less luck. > In order to avoid all scrollbars, I have to make the image about half > the size of the map div at all times, which can result in some > unreadable graphs when the map is small. If I set a minimum size for > readability, you get scrollbars - which I would be willing to live > with if they didn't DOUBLE UP on the right-hand side in IE! Let's just > say I haven't found these statements from the API docs to be true: > "By default, an info window expands to fit its content..." > "If you wish to explicitly size the content, you may use <div>s to do > so, and enable scrolling if you wish. Note that if you do not enable > scrolling and the content exceeds the space available in an info > window, the content may "spill" out of the info window." > > (those are > fromhttp://code.google.com/apis/maps/documentation/javascript/overlays.ht...) > > Instead, the infowindow seems to be made up of several native divs > that can't be modified - at least one of these divs has overflow:auto > set and I can't figure out how to override it. The multiple divs > involved seem to be what's making IE produce multiple vertical > scrollbars on the right hand side. > > I'm thinking of displaying the information differently anyway, so I > may ditch this effort, but I thought I'd share my observations on the > infowindow. I might put something in that just prompts folks to open a > big graph in a separate window if their map frame is too small to hold > a readable graph. > > On Jun 23, 7:56 am, Chad Killingsworth > > <[email protected]> wrote: > > Some Answers: > > > 1) There is a very elegant solution for dynamically sizing the map to > > fit the window size (minus header and footer room) using only CSS. > > Here's the general > > article,http://www.alistapart.com/articles/conflictingabsolutepositions/, > > and here's a specific > > implementation:http://search.missouristate.edu/map/mobile/examples/template.htm > > > 2) You're going to have to apply some type of algorithm to determine > > the size. You could use one resolution as your standard size, compare > > the current viewport size to the standard then proportionally resize > > the image. You can call map.fitBounds to cause the map to zoom to the > > correct level and still fit a specific boundary. > > > 3) Look at the last post here for information on how to detect when an > > image has loaded:http://www.codingforums.com/archive/index.php/t-48150.html. > > You can display a loading graphic and replace it when your load event > > occurs on your dynamic image. > > > Chad Killingsworth > > > On Jun 23, 7:39 am, "Dolbow, Mike (MDA)" <[email protected]> > > wrote: > > > > Thanks Josh, I'm going to have to give that a shot. > > > Cheers, > > > mike > > > > -----Original Message----- > > > From: [email protected] > > > [mailto:[email protected]] On Behalf Of JoshN > > > Sent: Tuesday, June 22, 2010 6:26 PM > > > To: Google Maps JavaScript API v3 > > > Subject: [Google Maps API v3] Re: General Map & InfoWindow Help > > > > I am trying to answer question 1, I use prototype.js's viewport > > > features: > > > So add this to the head: > > > > <script src="http://www.google.com/jsapi?key=YOUR_SITE_KEY";></script> > > > > Then this to the top of your file (no longer need the maps.google > > > script tag), > > > > google.load("prototype", "1.6.1.0"); > > > google.load("maps", "3", {"other_params":"sensor=false"}); > > > > Then add this to your initilization() > > > > function setSizeMap(){ > > > var width = Math.floor(document.viewport.getDimensions().width * . > > > 75); //set the float to percent of screen wanted > > > var height = Math.floor(document.viewport.getDimensions().height > > > * .85); //The same > > > if(width > height){ > > > //I want a map that's wider than it is tall. > > > $('map_canvas').setStyle({ > > > width: width + "px", > > > height: height + "px", > > > }); > > > }else{ > > > $('map_canvas').setStyle({ > > > width: width + "px", > > > height: width + "px", > > > }); > > > } > > > zoomPercent = Math.floor((width*height)/(750*550)); //I am setting > > > the zoom based on what looks good to me at 750w and 550h > > > } > > > > Best, > > > > On Jun 22, 11:31 am, mmdolbow <[email protected]> wrote: > > > > Hello all: > > > > I'm migrating a mashup to API v3 and looking for some general tips. > > > > Below is the production version in > > > > v2:http://gis.mda.state.mn.us/maps/csgsoil.htm > > > > Obviously not the prettiest HTML or Javascript, but it works. (I'm > > > > citing it here because that's where the v3 version will go when it's > > > > done, whereas the link I cite below is for testing.) > > > > > I figured I might as well clean up and try to enhance a few things > > > > when migrating to v3. I took out all the gunky wrappers and posted > > > > this as my sample for you all to rip > > > > apart:http://gis.mda.state.mn.us/maps/csgsoil_v3.htm > > > > > So, I have 3 questions: > > > > 1) How would you size the map div to adjust for screen resolution? I > > > > used a miniscript to change the height of the <td> tag that holds the > > > > div, but I'm doubtful this is the best approach. > > > > 2) Similarly, how would you size the image call that creates the soil > > > > temp graph that fills up the infowindow? Here's my dilemma at various > > > > screen resolutions: > > > > - At 800x600, you get scrollbars in the infowindow. > > > > - At 1024x768, the scrollbars go away but the numbers are pretty > > > > small and hard to read > > > > - At 1280x1024, the numbers are easier to read but the map should > > > > probably be set at a closer zoom so there's not so much space around > > > > the markers > > > > 3) Lastly, since the image call can take a while, how would you insert > > > > a temporary image like "Loading" into the infowindow while the call is > > > > taking place? > > > > > Thanks in advance for the help. I realize quite a bit of this is just > > > > resolving quirks of HTML and screen resolution, but I figure this > > > > group is pretty good at taking a crack at this. > > > > -- > > > You received this message because you are subscribed to the Google Groups > > > "Google Maps JavaScript API v3" group. > > > To post to this group, send email to > > > [email protected]. > > > To unsubscribe from this group, send email to > > > [email protected]. > > > For more options, visit this group > > > athttp://groups.google.com/group/google-maps-js-api-v3?hl=en. > > -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
