ebody: Google Maps Api - Marker Icon in Streetview bei jedem Zoomlevel auf gleicher Höhe halten

Beitrag lesen

Hallo,

in einem Streetview Panorama setze ich einen Marker.

let Marker = new google.maps.Marker({
 position: {lat: -31.563910, lng: 147.154312},
 map: map,
 animation: google.maps.Animation.DROP,
 icon:{
    url: 'icon.svg',          
    size: new google.maps.Size(100, 100),         
    scaledSize: new google.maps.Size(100, 100),
    origin: new google.maps.Point(0, 0),
    anchor: new google.maps.Point(50, 100)         
 }
}); 

Mit dieser Zeile verschiebe ich den Marker in der x und y Achse: anchor: new google.maps.Point(50, 100)

Ich möchte den Marker immer auf einer bestimmten Höhe zeigen. In den Streetview Eigenschaften, lege ich das Zoomlevel erstmal fest. z.B. 12. und kann den y Wert in dieser Zeile entsprechend anpassen, damit der Marker die gewünschte Höhe hat: anchor: new google.maps.Point(x, y)

Wenn man jetzt rein oder rauszoomt verrutscht der Marker in seiner y-Achse und hat nicht mehr die gewünschte Höhe. Es sollte so wie in diesem Beispiel aussehen. Egal welches Zoomlevel, der Marker bleibt immer in der gleichen Höhe.

Ich habe ein Script angefangen, um den Y-Wert ans neue Zoomlevel anzupassen, aber das funktioniert auch nicht so wirklich:

google.maps.event.addListener(map.getStreetView(), 'zoom_changed', function() {
    
    let newZoom = parseFloat(map.getStreetView().getZoom());

    let zoomDiff = newZoom - 1 ;

    zoomDiff = zoomDiff*15;

    if (typeof panoMarkerArr !== 'undefined' && panoMarkerArr.length > 0) {
        let y = panoMarkerArr[panoMarkerArr.length-1].icon.anchor.y + zoomDiff;
        panoMarkerArr[panoMarkerArr.length-1].icon.anchor = new google.maps.Point(50, y);
    }

});

Gibt es evtl. eine Eigenschaft dafür? Für leaflet gibt es glaube ich scrollWheelZoom und bewirkt das, was ich brauche (bin aber nicht 100% sicher).

Oder wie kann man es sonst hinbekommen, dass der Marker bei jedem Zoomlevel seine Höhe beibehält?

Gruß ebody