Solved

Auto-resizing a Google map

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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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 rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
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…

765 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