Как изменить размер окна Google Maps InfoWindow в Javascript (v3 API)

да. Это дубликат Google Maps API v3: InfoWindow неправильно определяет размер .
Однако ни одно из решений, предложенных по этому вопросу, у меня не помогло :(

code:

 //after getting a 'position' object:
 var mapPos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
 var mapOptions = { zoom:16, center:mapPos,mapTypeId:google.maps.MapTypeId.ROADMAP };
 var yourLocationMap = new google.maps.Map(document.getElementById('locationMap'), mapOptions);

 var infoContent = '<div style="width:40px;height:20px;">some information content...</div>';
 var infoBaloon = new google.maps.InfoWindow({position:mapPos, content:infoContent, maxWidth:40});
 infoBaloon.open(yourLocationMap);

Это HTML-код, который Google Maps создает для информационного окна в верхней части карты: 

<div style="width: 247px; height: 88px;"> //<-This is actually the size of the info
window. I have no idea on what basis it decides on these dimensions.

     //next is the div for the 'X'(close) button:
    <div style="width: 10px; height: 10px; overflow: hidden; position: absolute; opacity: 0.7; left: 12px; top: 12px; z-index: 10000; cursor: pointer;">
        <img src="http://maps.gstatic.com/mapfiles/mv/imgs8.png" style="position: absolute; left: -18px; top: -44px; width: 68px; height: 67px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;"></div><div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;">
    </div>

    // I don't know where this div is coming from... :\
    <div style="cursor: default; position: absolute; right: 18px; top: 18px; z-index: 2; overflow: auto; width: 213px; height: 54px;">
       <div style="overflow: auto;">

           **// and then, finally, the div I put in the Content of the InfoWindow:
           <div style="width:40px;height:20px;">Some content information...</div>**
       </div>
   </div>
</div>


Помогите?


ПРИМЕЧАНИЕ: div #locationMap имеет стили для своего размера (не включены в пример кода). Нет проблем с представлением карты - просто представление InfoWindow, которое всегда кажется шириной 247 пикселей, независимо от того, что я установил для его содержимого ...


javascript maps size infowindow
person Yuval A.    schedule 04.02.2012    source источник
comment
Может ли быть минимальная ширина информационного окна 247 пикселей? Единственное доказательство, которое я нашел для этого, содержится в этой статье: svennerberg.com/2009/02/   -  person Yuval A.    schedule 04.02.2012
comment
Решение вышеуказанных вопросов не работает только потому, что оно предназначено для карты Google v2. Я динамически обновил размер информационного окна, взломав HTML с помощью jQuery, но я думаю, это похоже на исправление кода. Так что лучше перестать концентрироваться на этом и, если возможно, изменить функциональность (представление).   -  person Jaykishan    schedule 31.12.2013

Ответы (1)


arrow_upward
0
arrow_downward

не уверен, помогает ли это, но я обнаружил, что на самом деле есть 2 вещи, которые контролируют высоту информационного окна в картах Google.

  1. Содержимое infoWindow и CSS, который применяется к содержимому infoWindow (большинству людей это хорошо известно)
  2. (и что может сбивать с толку) сама высота холста google maps !!!

У меня был холст с высотой 250 пикселей, и независимо от того, как я стилизовал контент, который должен был быть помещен в infoWindow, он оставался фиксированной высотой 88 пикселей, и появилась полоса прокрутки. Как только я увеличил размер холста (300 пикселей), максимальная высота информационного окна также изменилась.

Если вы думаете, что все остальное делаете правильно с изменением размера вашего infoWindow, последнее средство - сделать холст немного больше.

удачи!

person Adam    schedule 09.06.2012