Solved

Resizing a Google Map Info Window

Posted on 2014-12-21
2
437 Views
Last Modified: 2014-12-21
My website incorporates an API v3 Google Map at www.mauitradewinds.com/location.htm.  An info window with text "Maui Tradewinds" is supposed to appear when visitors click or tap the map location marker, and up until recently this worked on a desktop, iPad and iPhone.   iPhone visitors are redirected to www.mauitradewinds.com/m_location.htm 

I just noticed, on iPad and iPhone, that the info window text is incomplete ("Maui____"  instead of Maui Tradewinds).  However, if I include "<br>" between "Maui" and "Tradewinds", then both words are displayed, on separate lines. I've no clue as to what caused this change, and I'm an amateur at coding.  Perhaps this is related to Apples' recent release of iOS 8,  which I have just installed on my iPad and iPhone.  In any event, the issue seems related to the size of the Info Window.  If I can make the window wider, I believe the entire text will be displayed with iOS devices.  

Please advise how to control the size of the Info Window.
0
Comment
Question by:ddantes
2 Comments
 
LVL 42

Accepted Solution

by:
Rob Jurd, EE MVE earned 500 total points
ID: 40512127
It's to do with the width of the element and the overflow settings:

<div style="overflow: auto; width: 98px; height: 24px;">
    <div class="" style="overflow: hidden;width: 100px;">Maui Tradewinds</div>
</div>

change this to

<div style="overflow: hidden; width: 100px; height: 24px;">
    <div class="" style="overflow: hidden;width: 100px;">Maui Tradewinds</div>
</div>
0
 

Author Comment

by:ddantes
ID: 40512137
That did it.  Thanks!
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
Regular Expression Calculator Tester 2 48
Regular Expression 1-100 with two digits 15 21
Objects on Same Line 2 17
Put shading on half of picture 8 21
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…
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!
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
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…

932 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

12 Experts available now in Live!

Get 1:1 Help Now