Solved

Auto-resizing a Google map

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
ngStyle with an input variable doesn't work 14 30
WordPress Themes 10 34
Form with Modals 16 42
geting geocode of a user with using Google maps api 8 16
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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 code hide show and toggles. 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…

911 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