Google maps Infowindow doesnt size as expected

Question

I just want to display a default info window with the content The 123456789. So I am using the maps example from google, and changing the infowindow content. Simple as that.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"><meta charset="utf-8">
    <title>Info windows</title>
    <style>html, body, #map-canvas {height: 100%;margin: 0px;padding: 0px}</style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = {zoom: 4,center: myLatlng};

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);                        
  var infowindow = new google.maps.InfoWindow({
      content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head><body><div id="map-canvas"></div></body></html>

I am getting this in both Firefox and Chrome (expected The 123456789). Only in IE I have the desired result. The rest of the text is wrapped and in chrome the scrollbar is also visible.

enter image description here

Now, as per the documentation, the InfoWindow should be expanded to fit my text, which it does if the content is a bit longer than the one I am testing. Is this a google maps styling issue and how can I simply display that text without custom InfoWindows and without hackish css?

edit

Tested the abode code again. The first time the infowindo is shown its problematic, the following times it's displayed as it should.

@geocodezip The first time I click it is displayed nearly as the image in the question, and subsequent clicks display the infowindow as it should. — Odys, Jan 11 '15 at 03:03
That isn't what I saw in Chrome. What browser are you using? — geocodezip, Jan 11 '15 at 03:04
The screenshot is using firefox. In chrome I also see a little vertical scrollbar in the left of the close button — Odys, Jan 11 '15 at 03:16

score 0 · Answer 1 · edited Jan 11 '15 at 03:12

0

Just tested your code and seems to be correct.

https://www.dropbox.com/s/i1bgvg74chb3hzt/Screenshot%202015-01-10%2017.53.36.png?dl=0

One thing you can do is, rather than create the infowindow full of content, you may wanna create the instance and, onclick set the content.

 google.maps.event.addListener(marker, 'click', function() {
   infowindow.setContent('something');
   infowindow.open(map,marker);
 });

edited Jan 11 '15 at 03:12

geocodezip

158,664
13
220
245

answered Jan 11 '15 at 01:55

bribeiro

715
5
5

I've tried this in my real issue and didn't help. The first time the infoWindow has the correct size. If I close and reopen it, it is like this. I always set content before show. In which browser you got that result using the code from my question? – Odys Jan 11 '15 at 02:00

geocodezip · Answer 2 · 2015-01-11T04:24:20.200

You could try adding a listener to the infowindow 'domready' event (using addListenerOnce), close infowindow, then reopen it.

proof of concept code snippet:

function initialize() {
  var myLatlng = new google.maps.LatLng(-25.363882, 131.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'The 123456789'
  });

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Uluru (Ayers Rock)'
  });
  google.maps.event.addListener(marker, 'click', function() {
    google.maps.event.addListenerOnce(infowindow,'domready',function() {
      infowindow.close();
      infowindow.open(map,marker);
    });
    infowindow.open(map, marker);
  });
    google.maps.event.addListener(map, 'click', function() {
    infowindow.close();
  });
  google.maps.event.trigger(marker,'click');
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map-canvas {
  height: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="map-canvas"></div>

I can replicate the issue using firefox. It seems resolved in Chrome. Just hit Ctrl+F5. The first time you click the marker it doesn't display correctly. Subsequent clicks work well. — Odys, Jan 11 '15 at 03:20
The code snippet works for me in both Chrome (39.0.2171.95 m) and Firefox (34.0.5) [Ctrl+F5 & "Run code snippet"] — geocodezip, Jan 11 '15 at 03:25

score 0 · Answer 3 · answered Jan 11 '15 at 03:12

0

You should put the text in a '<div>' tag with style or class that has style attributes

   var infowindow = new google.maps.InfoWindow({
       content: '<div style="width: 10em;">The 123456789</div>'
   });

answered Jan 11 '15 at 03:12

maurice

171
1
6

score 0 · Answer 4 · answered Jan 15 '15 at 11:03

0

Try to add

style="word-wrap:nospace"

as an attribute of your content

var infowindow = new google.maps.InfoWindow({
    content: '<p style="word-wrap:nospace">'+The 123456789+'</p>'
});

answered Jan 15 '15 at 11:03

m.cainelli

36
3

score 0 · Accepted Answer · edited May 23 '17 at 12:13

0

This was due to global img styling. To revert it I just added

.gm-style img { max-width: none; }

Kudos to this answer.

edited May 23 '17 at 12:13

Community

1
1

answered Feb 04 '15 at 19:34

Odys

8,951
10
69
111

Google maps Infowindow doesnt size as expected

5 Answers5