Я опаздываю на вечеринку, но вот мои два цента.
У вас есть два основных варианта:
Вариант 1: Вы либо сами создаете элементы управления, используя HTML / CSS, которые затем можете поместить на карту в правильное положение, используя абсолютное положение или аналогичные средства. Даже при том, что это работает в производстве, мне это не нравится, потому что ваш HTML / CSS для элемента не загружается одновременно с отображением карты. Также вы отделяете свой HTML / CSS-код для элементов управления, чтобы было сложнее повторно использовать одну и ту же карту на разных страницах. например «Я забыл добавить элементы управления?»
Вариант 2: Вы создаете пользовательский элемент управления , который смотрит и чувствует понравившиеся вам контроллеры зума. Ниже приведен код на практике.
Короче говоря, сначала нужно отключить обычные контроллеры пользовательского интерфейса, вызвав:
var mapOptions = {
zoom: 12,
center: chicago,
/* Disabling default UI widgets */
disableDefaultUI: true // <-- see this line
}
А потом вы просто создаете контроллер и используете его.
HTML:
...
<div id="map-canvas"></div>
...
CSS:
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px;
}
JavaScript:
var map;
var chicago = new google.maps.LatLng(41.850033, -87.6500523);
/**
* The ZoomControl adds +/- button for the 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.height = '64px';
controlDiv.appendChild(controlWrapper);
// Set CSS for the zoomIn
var zoomInButton = document.createElement('div');
zoomInButton.style.width = '32px';
zoomInButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomInButton.style.backgroundImage = 'url("http://placehold.it/32/00ff00")';
controlWrapper.appendChild(zoomInButton);
// Set CSS for the zoomOut
var zoomOutButton = document.createElement('div');
zoomOutButton.style.width = '32px';
zoomOutButton.style.height = '32px';
/* Change this to be the .png image you want to use */
zoomOutButton.style.backgroundImage = 'url("http://placehold.it/32/0000ff")';
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: chicago,
/* 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_LEFT].push(zoomControlDiv);
}
initialize();
Примечание. Этот код не содержит каких-либо причудливых значков и т. П., А только заполнителей. Поэтому вам может понадобиться настроить его под свои нужды. Кроме того, не забудьте добавить обычные теги HTML5 и сценарий включения для javascript api v3 карт Google. Я добавил только <div id="map-canvas"></div>, потому что потребность в остальной части тела довольно очевидна.
Чтобы увидеть его вживую: Вот пример работы jsfiddle
Приветствие.