Estoy intentando crear un conjunto de mapas de Google maps personalizado, y quiero crear dos controles, que me permiten avanzar o retroceder entre los mapas.
La creación de los controles no es un problema. Los he creado y funcionan bien. Lo malo es que están centrados el uno encima del otro. Pero en realidad me gustaría que estuviesen centrados, el uno al lado del otro!
El código que uso es el siguiente:
Código HTML:
<!DOCTYPE html> <html> <head> <style type="text/css"> html, body { height: 100%; margin: 0; padding: 0; } #map { height: 100%; } </style> </head> <body> <div id="map"></div> <script type="text/javascript">
Código:
var map;
function CenterControl(controlDiv, map, center) {
var control = this;
// Set the center property upon construction
control.center_ = center;
controlDiv.style.clear = 'both';
// Set CSS for the control border
var goCenterUI = document.createElement('div');
goCenterUI.style.backgroundColor = '#fff';
goCenterUI.style.border = '2px solid #fff';
goCenterUI.style.borderRadius = '3px';
goCenterUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
goCenterUI.style.cursor = 'pointer';
goCenterUI.style.marginBottom = '22px';
goCenterUI.id = 'goCenterUI';
goCenterUI.title = 'Atras';
controlDiv.appendChild(goCenterUI);
// Set CSS for the control interior
var goCenterText = document.createElement('div');
goCenterText.style.color = 'rgb(25,25,25)';
goCenterText.style.fontFamily = 'Roboto,Arial,sans-serif';
goCenterText.style.fontSize = '16px';
goCenterText.style.lineHeight = '38px';
goCenterText.style.paddingLeft = '5px';
goCenterText.style.paddingRight = '5px';
goCenterText.id = 'goCenterText';
goCenterText.innerHTML = '<a href="https://www.google.es/"><</a>';
goCenterUI.appendChild(goCenterText);
// Set CSS for the setCenter control border
var setCenterUI = document.createElement('div');
setCenterUI.style.backgroundColor = '#fff';
setCenterUI.style.border = '2px solid #fff';
setCenterUI.style.borderRadius = '3px';
setCenterUI.style.boxShadow = '0 2px 6px rgba(0,0,0,.3)';
setCenterUI.style.cursor = 'pointer';
setCenterUI.style.marginBottom = '22px';
setCenterUI.id = 'setCenterUI';
setCenterUI.title = 'Adelante';
controlDiv.appendChild(setCenterUI);
// Set CSS for the control interior
var setCenterText = document.createElement('div');
setCenterText.style.color = 'rgb(25,25,25)';
setCenterText.style.fontFamily = 'Roboto,Arial,sans-serif';
setCenterText.style.fontSize = '16px';
setCenterText.style.lineHeight = '38px';
setCenterText.style.paddingLeft = '5px';
setCenterText.style.paddingRight = '5px';
setCenterText.id = 'setCenterText';
setCenterText.innerHTML = '<a href="https://www.google.es/">></a>';
setCenterUI.appendChild(setCenterText);
}
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 25.557500, lng: 48.900133},
zoom: 3,
mapTypeId: google.maps.MapTypeId.TERRAIN,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: [
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.HYBRID
]
},
zoomControl: true,
streetViewControl: false,
rotateControl: true,
scaleControl: true
});
// Create the DIV to hold the control and call the CenterControl() constructor
// passing in this DIV.
var centerControlDiv = document.createElement('div');
var centerControl = new CenterControl(centerControlDiv, map);
centerControlDiv.index = 1;
centerControlDiv.style['padding-top'] = '24px';
map.controls[google.maps.ControlPosition.TOP_CENTER].push(centerControlDiv);
}
Código HTML:
</script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=XXXXX&callback=initMap"> </script> </body> </html>
Gracias!
