Solved

Resizing a Google Map Info Window

Posted on 2014-12-21
2
451 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 43

Accepted Solution

by:
Rob 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
This article discusses four methods for overlaying images in a container on a web page
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

756 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