2012-03-12 7 views
28

Нажатие на маркер не отображается правильно на моей карте. Веб-сайт находится здесь.Google Map Infowindow не отображается должным образом

Вы также заметите, что управление картой также не отображается должным образом.

var map; 
    var locations = <?php print json_encode(di_get_locations()); ?>; 
    var markers = [] 
    jQuery(function($){ 
     var options = { 
      center: new google.maps.LatLng(51.840639771473, 5.8587418730469), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     map = new google.maps.Map(document.getElementById("map_canvas"), options); 

     for (var i=0; i < locations.length;i++) { 
      makeMarker(locations[i]); 
     } 
     centerMap(); 

    }); 
    function makeMarker(location) { 
     var markerOptions = {map: map, position: new google.maps.LatLng(location.lat, location.lng)}; 
     var marker = new google.maps.Marker(markerOptions); 
     markers.push(marker); 
     var content = ''; 

     var infowindow = new google.maps.InfoWindow(
      { content: "test", 
      size: new google.maps.Size(50,50), 
      disableAutoPan : true 
      }); 


     google.maps.event.addListener(marker, 'click', function(e) { 
      infowindow.open(map,marker); 
     }); 
    } 
    function centerMap() { 
     map.setCenter(markers[markers.length-1].getPosition()); 
    } 

Примечание: Я использую Google Maps JS V3.

+0

У вас больше нет ссылки на ваш сайт и поэтому неясно, какая у вас проблема. Ваш вопрос в его нынешнем виде вряд ли поможет любым пользователям в будущем. –

+0

Это может быть аналогичная проблема с описанной здесь: http://stackoverflow.com/questions/1554893/google-maps-api-v3-infowindow-not-sizing-correctly –

ответ

96

Проблема нагнетается этим форматом в style.css:

img { 
    height: auto; 
    max-width: 100%;/* <--the problem occurs here*/ 
} 

Добавьте это к концу вашего style.css применить по умолчанию-значение в изображения внутри карты:

#map_canvas img{max-width:none} 
+0

Спасибо! Это сработало. Большое спасибо за лечение моей головной боли! – Jenny

+1

Это тоже решило. Если кто-то хочет знать, как это выглядит, см. Http://i.stack.imgur.com/Bl8ci.png –

+1

Это было довольно очевидно, но это экономит мне время. Спасибо друг. –

1

Возможно, вы используете img{ max-width: 100%; } как универсальный.

Попробуйте это в свой CSS

.gmnoprint img { 
    max-width: none; 
} 
+1

Почему вы отправляете то же самое, что и принятый ответ более 1 года спустя? – 0x1gene

+0

@ 0x1gene причина, по которой 'img {max-width: 100%}' будет влиять на другие свойства css проекта. В то же время '.gmnoprint img: {max-width: none; } 'не будет производить никаких свойств. – Muhammed

+3

Вы правы, как '' '#map_canvas img {max-width: none}' '' делает ... – 0x1gene

0

В Magento случае Google управления масштаб карты не показывали из-за конфликта с библиотекой Prototype.

0

Я решил проблему с:

.gmnoprint img { 
    max-height: none; 
} 

вместо max-width.

Thanks

Смежные вопросы