Is it vain to respond to my own posts? :-) Just wanted to post back that the low-tech solution to the "image loading" problem worked just fine (only 1 div required, with a -1 z index), and is on display here: http://gis.mda.state.mn.us/maps/csgsoil_v3.htm
The images are back in demand and I think the ultimate solution will be a mix of both quick text and the graphs. On Jun 25, 8:38 am, mmdolbow <[email protected]> wrote: > 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.
