Google maps set width for InfoWindow

问题

Hi I am using InfoWindow to get custom popup on google maps, but I can't set it width, I tried setting it inline to wrapper tag, but it doesn't work. In this case I need it to be 750px.

Here is jsfiddle: http://jsfiddle.net/xxast/ and here is html file: http://www.mediafire.com/view/?66dbe6xzn1mul10

Here is method that is setting InfoWindow content:

 function getContent(parts, kmlEvent) {

                var content = ""+
       "<div id='width800' class='google-infobox-content' >" +
            "<div class='image'>" +
                "<img src='http://maps.google.com/maps/api/staticmap?center=" + kmlEvent.latLng.Ya + "," + kmlEvent.latLng.Za + "&amp;zoom=13&amp;size=150x150&amp;maptype=roadmap&amp;sensor=false&amp;language=&amp;markers=color:red|label:none|48.7758013,9.2529132' title='' width='150' height='150' >" +
                "<br />" +
                "<a href='https://maps.google.com/maps?sensore=true&daddr=" + kmlEvent.latLng.Za + "," + kmlEvent.latLng.Ya + "' target='_blank' >Full Google Map</a>" +
                "<a href='http://maps.google.com/help/maps/directions/Somewhere' target='_blank' >Directions</a>" +
            "</div>" +
            "<div class='location'>" +
                "<p>" + parts[0] + "</p>" +
                "<p>" + parts[1] + "</p>" +
                "<p>" + parts[2] + "</p>" +
                "<br/>" +
                "<p>" + parts[3] + "</p>" +
            "</div>" +
            "<div class='contact'>" +
                "<p>" + parts[4] + "</p>" +
                "<p>" + parts[5] + "</p>" +
                "<a href='mailto:" + parts[6] + "' >" + parts[6] + "</a>" +
                "<a href='" + parts[7] + "' target='_blank' >" + parts[7] + "</a>" +
            "</div>" +
            "<div class='others'>" +
                "<p><b>Product line</b></p>" +
                "<p>" + parts[8] + 
                "</p>" +
            "</div>" +                
        "</div>";

                return content;
            }

Updated here is updated jsfiddle with setted maxWidth and inline width for wrapper tag, but still it doesn't work: http://jsfiddle.net/xxast/3/

回答1:

In infoWinfow options try to set maxWidth to 750. Also to make sure the style is not overwiten by default goole values rename google-infobox-content to something different. You may try to use a custom info window library: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html

回答2:

there is no width in the google.maps.InfoWindowOptions object.

create a div inside your infowindow, and set its width.
the infowindow will resize to fit the internal div.

i have a working example here: http://jsfiddle.net/RASG/vA4eQ/

EDIT

some extra info:

i've found in a google group a very interesting information, written by a google employee.

Info window size is determined based on two factors:

the size of the content

the size of the map (not the browser)

to be free of this, you must implement your own kind of infowindow.

some examples here:

http://gmaps-samples-v3.googlecode.com/svn/trunk/infowindow_custom/infowindow-custom.html
http://gmaps-samples-v3.googlecode.com/svn/trunk/smartinfowindow/smartinfowindow.html

回答3:

Google v3 Api comes with:

var iw = new google.maps.InfoWindow({ content: some_text, maxWidth: 200 });

More details here : Controlling the width of a Google Maps InfoWindow

回答4:

  Use as below in your google map script

  //content = anything you like to show
  var content = '<div id="content" align="center">'+          
              '<h1 id="firstHeading" class="firstHeading" style="margin:0;color:#ff6600;">Your Title</h1>'+ 
              '<p style="color:#0d6585;font-weight:700;">Your Description'+
              '</p>'+
              '</div>';
  var infowindow = new google.maps.InfoWindow({
     content: content,
     maxWidth: 300 //your desired width
  });

回答5:

Make a div and set that to the infowindow using setcontent it works for sure

来源：https://stackoverflow.com/questions/13291195/google-maps-set-width-for-infowindow

标签

google-maps

google-maps-api-3