Usiłuję zaimplementować niestandardowy infoBubble, który ma otwarcie pola po stronie znacznika, a nie domyślną pozycję na górze. Okazało się to trudniejsze niż oczekiwano.

Używając normalnego infoWindow możesz użyć pixelOffset. Zobacz tutajdokumentacja

Przy użyciu infoBubble nie wydaje się, aby tak było. Czy mimo to używasz pixelOffset w infoBubble lub coś, co zrobi to samo?

Jest to bardzo trudne do wyszukania, ponieważ użycie wyszukiwarki Google, takiej jak ta, nie przynosi żadnych istotnych wynikówWyszukiwarka Google

Poniżej znajdują się wszystkie moje zasoby, z których korzystałem.

Przykład informacjiBubbletutaj.

Mój JavaScript, aby skonfigurować mapę i infoBubbletutaj.

A teraz mój javascript tutaj w przypadku, gdy link jsfiddle jest uszkodzony.

<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>

Aktualizacja

Aby pomóc w odpowiedzi na to pytanie, przygotowałem przypadek testowytutaj. Ważnymi liniami są linie 38 i 39, które powinny określać, gdzie umieścić etykietę.

Aktualizacja 2

Aby nagroda została przyznana, muszę zobaczyć przykład infoBubble umieszczony z dala od jego domyślnej pozycji powyżej znacznika. Najlepiej po prawej stronie znacznika.

Aktualizacja 3

Usunąłem testcase z aktualizacji 1, ponieważ jest on hostowany na serwerach mojej starej firmy.