Нажатие на маркер не отображается должным образом на моей карте. Веб-сайт находится здесь.
Вы также заметите, что управление картой также не отображается должным образом.
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.
Проблема вытесняется этим форматом внутри style.css:
img {
height: auto;
max-width: 100%;/* <--the problem occurs here*/
}
Добавьте это в конец вашего стиля .css, чтобы применить значение по умолчанию для изображений внутри карты:
#map_canvas img{max-width:none}
Проблема заключается в том, что вы используете img{ max-width: 100%; } как универсальный.
Попробуйте это в своем css
.gmnoprint img {
max-width: none;
}
В случае Magento элементы управления масштабированием карты google не отображались из-за конфликта с библиотекой PROTOTYPE.
Я решил проблему с помощью:
.gmnoprint img {
max-height: none;
}
вместо max-width.
Спасибо