Solved

Auto-resizing a Google map

Posted on 2014-11-08
3
282 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
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 28

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

Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

Question has a verified solution.

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

Suggested Solutions

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…
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
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)

831 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