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.'
}
});
});
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
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.