Set google maps InfoWindow to more than 700px width

Question

Content of the InfoWindow that I intend to show is 840px x 660px. By setting MaxWidth property in the constructor

(ex. new google.maps.InfoWindow({ content: some_text, maxWidth: 840});)

It sets the window with width of 707px. I've manage to overwrite classes for .gm-style-iw and for #content (my content is in div with properly set of width and height), but there are some div tags in between #content div tag and div tag with class .gm-style-iw with width of maximum 707px and height of max 645px (these values I've found by "Inspecting Element" in Chrome).

If I remove entire style (in Chrome Inspect Element) of the leading div tag (which contains at least 7-8 div sub-tags and among them div tag with class .gm-style-iw and #content div tag) and all sub-tags which are without specified class names nor specified id, then the window appears to be fine, BUT I can't manage to set width and height in the class or javascript... can someone help me with this?

If you still interested in solution, check this answer: http://stackoverflow.com/questions/28589361/google-maps-infowindow-width-is-overwritten-even-when-set-correctly — yezior, Mar 24 '15 at 10:39

Suchit kumar · Accepted Answer · 2014-12-24T08:19:51.547

do not pass 840px pass value like 840.if you use 840px this you will be getting error like:

identifier starts immediately after numeric literal

you should use this:

var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

see a small demo:

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 contentString = '<div id="content">'+
      '<div id="siteNotice">'+
      '</div>'+
      '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+
      '<div id="bodyContent">'+
      '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
      'sandstone rock formation in the southern part of the '+
      'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+
      'south west of the nearest large town, Alice Springs; 450&#160;km '+
      '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+
      'features of the Uluru - Kata Tjuta National Park. Uluru is '+
      'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
      'Aboriginal people of the area. It has many springs, waterholes, '+
      'rock caves and ancient paintings. Uluru is listed as a World '+
      'Heritage Site.</p>'+
      '<p>Attribution: Uluru, <a href="http://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+
      'http://en.wikipedia.org/w/index.php?title=Uluru</a> '+
      '(last visited June 22, 2009).</p>'+
      '</div>'+
      '</div>';

  var infowindow = new google.maps.InfoWindow({
      content: contentString,
      maxWidth: 840
  });

  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);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false&libraries=drawing,geometry"></script>
<div id="map-canvas"></div>

That's not a solution. Please "Run Code snipped" and go to "Inspect Element" and you can see that leading div has width of 707px... I can't upload print screen to show — Stefan Atanasovski, Dec 24 '14 at 08:33
try using this to set new width: $("div.gm-style").find('*').each(function(){ console.log($(this).width()); $(this).width(840); }); — Suchit kumar, Dec 24 '14 at 09:52
No, that's not a solution. I've also tried similar approaches but still not appropriate and clean solution... — Stefan Atanasovski, Dec 24 '14 at 10:57

Set google maps InfoWindow to more than 700px width

1 Answers1