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.
