Estoy realizando una aplicación en la cual quiero que al presionar un punto del mapa aparezca un menú superpuesto al mapa a la derecha en el cual mostrar datos, el problema es que no consigo que el menú aparezca encima del mapa, si no que lo que consigo es que se extienda la pagina un 30% más a la derecha, ¿Cómo podría lograrlo?
CSS
#map {
width:100%;
height: 100%;
position: relative;
display: inline-block;
}
#menuMap{
visibility: hidden;
position: absolute;
width: 30%;
height: 100%;
padding-top: 70px;
float: right;
display: inline-block;
}
html,
body {
height: 100%;
width:100%;
margin: 0;
padding: 0;
}
HTML
<div id="map"></div>
<div id="menuMap"><p>hello world</p></div>
JQUERY
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.6059969,
lng: -3.706213,
},
zoom: 13,
mapTypeId: 'hybrid'
});
var image = {
url: '../resources/logoMap.png', //ruta de la imagen
};
var marker = new google.maps.Marker({
position: {lat: 40.617335, lng: -3.703045},
map: map,
icon: image,
title: 'Sequopro'
});
marker.addListener("click", () => {
var divIsVisible;
divIsVisible = $('#menuMap').is(':visible');
if (divIsVisible){
$('#menuMap').hide(3000);
}else{
$('#menuMap').show(3000);
}
// window.location = "particulas1.php";
});
Y este es el efecto que consigo al clickar en el punto del mapa, el mapa se extiende hacia la derecha y muestra el menú, pero lo que quiero es que se superponga encima del mapa, no que extienda la página, gracias.