Solved

Auto-resizing a Google map

Posted on 2014-11-08
3
327 Views
Last Modified: 2014-11-09
I am a novice at js and css.  My site features a Google map for desktop/laptop/tablet visitors at www.mauitradewinds.com/location.htm  and a Google map for smart phone visitors at www.mauitradewinds.com/m_location.htm    I'd like to explore the possibility of making the map auto-resize to fit the browser window.    

One purpose for this relates to the location marker.  The map will center on the marker whenever the zoom control is used, unless part of the map is clipped off in a narrow window.  In that case, the marker may become invisible and remain outside the window frame.

Can you provide some code to accomplish this auto-resizing?  Also, if there is a reason not to do it, I'd like to hear about it.
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 40431251
Simplest option is to use width="100%" with div (which renders the google map.)

Are you usingBootStrap, then is much easier to get Responsive Web Page.
Look at  http://bestindiafl.com/bisite/about.html
I have used bootstrap and responsive iframe for map.


                      <iframe class="img-responsive img-border-left" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d28155.27511057088!2d-80.67219!3d28.103553!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x88de0e5eaeface8b%3A0x13987bf224536b94!2s205+S+Wickham+Rd%2C+Melbourne%2C+FL+32904!5e0!3m2!1sen!2sus!4v1410751572936"  frameborder="0" style="border:0; width: 100%;height: 300px;"></iframe>
0
 

Author Comment

by:ddantes
ID: 40431255
Thank you for your comment.  I'm not using BootStrap.  The maps on my site do not use iframe.  My understanding is that the option to turn dragging on or off can't be applied with iframe.  I tried replacing the map container width with a percentage instead of pixels.  If I don't specify a pixel width and height for the map canvas, the map will not appear.
0
 
LVL 29

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 40431274
I know the limitation on width and height requirement. Hence I use the iframe. which autofits the map.

Other option is resize on load.


look at https://developers.google.com/maps/documentation/javascript/reference?csw=1#event
0

Featured Post

SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

615 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question