Gmaps.js - zoomControlOpt不会更改位置或样式

Question

First post here on stackoverflow.

Trying to integrate a google map on my website using Gmaps.js ( http://hpneo.github.io/gmaps/ ). The map is working as it should, although, I'd like to make some changes to the UI.

I've already disabled the default UI and only added the zoom-control, as I want to.

But I need to change the position of the zoom-control, and it doesn't matter what I try, nothing happens. The zoom-control remains on default position. And to the real problem, so does the touch-zoom-control. You see, I'm having a transparent(.png) image over a part of the map, and that image makes the touch-zoom-out button untouchable, so I will have to move it.

After some trying, I've found out that none of the zoomControlOpt objects change anything.

$(document).ready(function(){
            var map = new GMaps({
                div: '#map',
                lat: 60.156372,
                lng: 16.851997,
                zoom: 11,
                disableDefaultUI: true,
                zoomControl : true,
                zoomControlOpt: {
                    style : 'SMALL',
                    position: 'TOP_RIGHT'
                },
            });
            map.addMarker({
                lat: 60.140132,
                lng: 16.83658,
                open: true,
                title: 'Ingbofestivalen',
                infoWindow: {
                    content: 'Ingbofestivalen ligger på cykelavstånd från Tärnsjö. Bussförbindelser till Tärnsjö finns från Sala, Heby och Uppsala.' 
                }
            });
        });

Answer 1

the zoomControlOpt doesn't work because you disable the default UI, if you only want to use the zoom control you can use the code below

var map = new GMaps({
            div: '#map',
            lat: 60.156372,
            lng: 16.851997,
            zoom: 11,
            zoomControl : true,
            zoomControlOpt: {
                style : 'SMALL',
                position: 'TOP_RIGHT'
            },
            panControl : false,
            streetViewControl : false,
            mapTypeControl: false,
            overviewMapControl: false
});