Ich versuche, ein benutzerdefiniertes InfoBubble zu implementieren, bei dem sich das Feld an der Seite eines Markers und nicht an der Standardposition oben befindet. Dies hat sich als schwieriger als erwartet herausgestellt.

Mit dem normalen infoWindow können Sie pixelOffset verwenden. Siehe hier für dieDokumentation

Mit infoBubble scheint dies nicht der Fall zu sein. Gibt es eine Möglichkeit, pixelOffset in einer InfoBubble zu verwenden, oder etwas, das dasselbe bewirkt?

Ich fand es sehr schwierig, danach zu suchen, da die Verwendung einer solchen Google-Suche keine relevanten Ergebnisse liefertGoogle-Suche

Nachfolgend finden Sie alle meine Ressourcen, die ich verwendet habe.

Beispiel für infoBubbleHier.

Mein JavaScript um die Karte und infoBubble einzurichtenHier.

Und jetzt mein Javascript hier nur für den Fall, dass der jsfiddle Link kaputt ist.

<script type="text/javascript">

    $(document).ready(function () {
        init();
    });

    function init() {

        //Setup the map
        var googleMapOptions = {
            center: new google.maps.LatLng(53.5167, -1.1333),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        //Start the map
        var map = new google.maps.Map(document.getElementById("map_canvas"),
        googleMapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(53.5267, -1.1333),
            title: "Just a test"
        });

        marker.setMap(map);

        infoBubble = new InfoBubble({
            map: map,
            content: '<div class="phoneytext">Some label</div>',
            //position: new google.maps.LatLng(-35, 151),
            shadowStyle: 1,
            padding: '10px',
            //backgroundColor: 'rgb(57,57,57)',
            borderRadius: 5,
            minWidth: 200,
            arrowSize: 10,
            borderWidth: 1,
            borderColor: '#2c2c2c',
            disableAutoPan: true,
            hideCloseButton: false,
            arrowPosition: 7,
            backgroundClassName: 'phoney',
            pixelOffset: new google.maps.Size(130, 120),
            arrowStyle: 2
        });
        infoBubble.open(map, marker);

    }
</script>

Aktualisieren

Zur Beantwortung dieser Frage habe ich einen Testfall zusammengestelltHier. Die wichtigen Zeilen sind die Zeilen 38 und 39, in denen angegeben werden soll, wo das Etikett positioniert werden soll.

Update 2

Damit das Kopfgeld vergeben werden kann, muss ein Beispiel für das InfoBubble angezeigt werden, das nicht an der Standardposition über dem Marker positioniert ist. Am besten auf der rechten Seite des Markers.

Update 3

Ich habe den Testfall aus Update 1 entfernt, da er auf den Servern meiner alten Firma gehostet wird.