Карта Google, добавление поля к позиции zoomControlOptions

У меня есть следующий код для управления параметрами карты Google на странице. Я хочу добавить margin-top к параметрам управления масштабированием, так как в настоящее время он находится за элементом, который я добавил на карту, и который должен быть в правом верхнем углу карты. Я попытался добавить свой собственный пользовательский элемент, как я видел в других вопросах, но не работает с моей текущей настройкой, делая следующее, по какой-то причине помещает элемент управления сверху и по центру?

// create custom div to add to zoom controls
var controlDiv = document.createElement('div');
controlDiv.className = 'controlDiv';
controlDiv.index = -1;

// default options
var options = $.extend(true, {
  gmap: {
    scrollwheel: false,
    panControl: false,
    zoomControl: true,
    mapTypeControl: true,
    scaleControl: false,
    streetViewControl: true,
    overviewMapControl: false,
    fullscreenControl: false,
    zoomControlOptions: {
      position: [google.maps.ControlPosition.RIGHT_TOP].push(controlDiv)
    },
    streetViewControlOptions: {
      position: google.maps.ControlPosition.RIGHT_CENTER
    },
    mapTypeControlOptions: {
      position: google.maps.ControlPosition.LEFT_TOP
    }
  },
  placesSelector: '.map-places'
}, overrides);

// create basic map
var map = this.map(options);

🤔 А знаете ли вы, что...
JavaScript имеет множество библиотек и фреймворков, таких как jQuery, Angular, и Vue.js.

[РЕШЕНО]Перейти к решению

944

Javascript273878 вопросов Google maps4876 вопросов Google maps api 31308 вопросов

Ответ:

Решено

Вы не можете этого сделать, но вы можете легко создать свой собственный элемент управления масштабированием и разместить его там, где хотите. Простое доказательство концепции:

var map;

function ZoomControl(controlDiv, map) {
  
  // Creating divs & styles for custom zoom control
  controlDiv.style.padding = '5px';

  // Set CSS for the control wrapper
  var controlWrapper = document.createElement('div');
  controlWrapper.style.backgroundColor = 'white';
  controlWrapper.style.borderStyle = 'solid';
  controlWrapper.style.borderColor = 'gray';
  controlWrapper.style.borderWidth = '1px';
  controlWrapper.style.cursor = 'pointer';
  controlWrapper.style.textAlign = 'center';
  controlWrapper.style.width = '32px'; 
  
  controlWrapper.style.marginTop = '50px'; 

  controlDiv.appendChild(controlWrapper);
  
  // Set CSS for the zoomIn
  var zoomInButton = document.createElement('div');
  zoomInButton.style.fontSize = '3em';
  zoomInButton.style.lineHeight = '1em';
  zoomInButton.innerHTML = '+'
  controlWrapper.appendChild(zoomInButton);
    
  // Set CSS for the zoomOut
  var zoomOutButton = document.createElement('div');
  zoomOutButton.style.fontSize = '3em';
  zoomOutButton.style.lineHeight = '1em';
  zoomOutButton.innerHTML = '-'

  controlWrapper.appendChild(zoomOutButton);

  // Setup the click event listener - zoomIn
  google.maps.event.addDomListener(zoomInButton, 'click', function() {
    map.setZoom(map.getZoom() + 1);
  });
    
  // Setup the click event listener - zoomOut
  google.maps.event.addDomListener(zoomOutButton, 'click', function() {
    map.setZoom(map.getZoom() - 1);
  });  
    
}

function initialize() {
  var mapDiv = document.getElementById('map-canvas');
    
  var mapOptions = {
    zoom: 12,
    center: new google.maps.LatLng(41.850033, -87.6500523),
    /* Disabling default UI widgets */
    disableDefaultUI: true
  }
  
  map = new google.maps.Map(mapDiv, mapOptions);

  // Create the DIV to hold the control and call the ZoomControl() constructor
  // passing in this DIV.
  var zoomControlDiv = document.createElement('div');
  var zoomControl = new ZoomControl(zoomControlDiv, map);

  zoomControlDiv.index = 1;
  map.controls[google.maps.ControlPosition.TOP_CENTER].push(zoomControlDiv);
}

initialize();

#map-canvas {
  height: 180px;
}

<div id = "map-canvas"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initialize">
</script>

Карта Google, добавление поля к позиции zoomControlOptions

Ответ:

Интересные вопросы для изучения