Solved

Auto-resizing a Google map

Posted on 2014-11-08
3
267 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
  • 2
3 Comments
 
LVL 28

Expert Comment

by:Pravin Asar
Comment Utility
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
Comment Utility
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 28

Accepted Solution

by:
Pravin Asar earned 500 total points
Comment Utility
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

743 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now