Marker z google api jest obcięty


(Mwegrzycki) #1

Mamy problem z markerem z google api. Używamy go do rysowania na mapie. Na desktopie jest wszystko ok, niestety w wersji responsive na telefony marker jest obcięty z prawej strony. Tak to wygląda na najnowszym chrome androidowym:

_responsive.png

Oto kod:

// kod inicjalizacji google mapy podany dla formalności

var olsztyn = new google.maps.LatLng({{ map.getCenter.getLatitude }},{{ map.getCenter.getLongitude }});

var directionsDisplay = new google.maps.DirectionsRenderer();

var mapOptions = {
zoom: {{ map.getMapOption('zoom') }},
center: olsztyn,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.TOP_RIGHT
},
panControl: true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.TOP_RIGHT
},
scaleControl: true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
},
streetViewControl: true,
streetViewControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};

var map = new google.maps.Map(document.getElementById('{{ map.getHtmlContainerId }}'), mapOptions);
directionsDisplay.setMap(map);

// sekwencja ładowania punktĂłw do mapy, prawdopodobnie problem jest gdzieś tu
iteracja po zbiorze vvvv
var image = {
url: places[i].ico,
scaledSize: new google.maps.Size(55, 55)
};

var shape = {
coord: [1, 1, 1, 160, 158, 160, 158 , 1],
type: 'poly'
};

var marker = new google.maps.Marker({
position:new google.maps.LatLng(places[i].lat, places[i].lng),
map: map,
draggable: {% if map.isEditable %}true{% else %}false{% endif %},
icon: image,
shape: shape
});

newMarkers.push(marker);

iteracja ^^^^

Czy da się to jakoś poprawić? Jakieś pomysły?

Próbowaliśmy wrzucać obrazek o różnych wielkościach (29x29, 40x40, 50x50), wyłączać to skalowanie i nadal jest to samo. Jakimś wyjściem jest zamieszczenie ikonek z kilkoma przezroczystymi pixelami po tej prawej stronie, ale wtedy zmienia się też obszar klikania, wolelibyśmy inne rozwiązanie.

Ponadto błąd występuje na IE8.


(ra-v) #2
new google.maps.Marker({
			position: new google.maps.LatLng(MapMarker[0], MapMarker[1]),
			draggable: false,
			map: Map,
			icon: {
				url: Icon,
				anchor: IconPoint
			}
		});

Gdzie:

Map to google.maps.Map

Icon to string- URL obrazka

IconPoint to obiekt google.maps.Point