将Google Maps InfoWindow设置为超过700像素的宽度

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?

Answer 1

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>