Définir la largeur de la toile google map 100% moins la largeur de la barre latérale?

J'essaie d'afficher une barre latérale sur le côté gauche d'une carte google. La largeur de la barre latérale est de 380px et j'ai besoin de la div de carte de carte pour prendre la largeur restante, mais je n'ai pas de chance jusqu'à présent pour accomplir cela.Définir la largeur de la toile google map 100% moins la largeur de la barre latérale?

La div de carte doit avoir la largeur et la hauteur déclarées, sinon cela ne fonctionne pas. J'essayais de trouver une solution largeur 100% moins X pixels mais aucune d'entre elles ne fonctionne dans ce cas.

Est-ce que quelqu'un a une idée de comment le faire?

Merci.

J'ai essayé, mais il semble que cela ne concerne pas la toile de carte div:

$(document).ready(function(){ 
$(window).width(); 
$(document).width(); 

var width1 = $(document).width(); 
var width2 = $("#left").width(); 

var canvas_width = width1 – width2 + "px"; 

$('#map_canvas').width = canvas_width;

});

Source

2011-08-27 elbatron

Ne pouvez-vous pas calculer la cote avec js et utiliser js pour ajouter la carte à l'écran? –

J'ai enlevé le tag [google-maps-api-3] le contenu des éléments ne sont pas particulièrement pertinents leur positionnement. –

Je le fais (aussi sidebar + GM) avec la largeur relative et min-largeurs. Je peux basculer la barre latérale visible/invisible. Pour enregistrer les valeurs d'origine, voir: Getting values of global stylesheet in jQuery).

BTW, je pense que vous affectation dans js est faux, il devrait être element.**style**.width ou jQuery $("#id").width(value): How to set width of a div in percent in JavaScript?

Les styles:

#sideBar { 
float: left; 
width: 27.5%; 
min-width: 275px; 
height: 100%; 
z-index: 0; 
} 

#sideBarLocation div { 
display: inline; 
} 

#mapCanvas 
{ 
width: 72.5%; 
min-width: 725px; 
height: 100%; 
float: left; 
z-index: 0; 
}

HTML:

<div id="sideBar"> 
      <!-- tab location starts here --> 
      <table id="sideBarLocation" class="sideBarStandard"> 
      ... 
      </table> 
</div> 
.... 
<!-- side bar ends here --> 
<div id="mapCanvas"></div>

Source

2011-08-27 09:43:27

Merci, oui j'ai réalisé que JS est faux ci-dessus. En utilisant votre CSS, la carte n'apparaît que si je change la position en absolu (c'est relativement relatif) et la carte flotte au-dessus de mon div sidebar sur la gauche. Pouvez-vous me montrer un exemple où quelqu'un a réalisé quelque chose comme je le veux? thx – elbatron

Dans mon cas, le "inline" pour le sous-élément sidebar a fait l'affaire en évitant le flottant. Vous devriez pouvoir remplacer la valeur en pourcentage par la largeur px absolue et la changer avec votre calcul ci-dessus (fixe). Cependant, vous devez recalculer lors du redimensionnement de la fenêtre. –

J'ai eu exactement le même problème, mais j'ai réussi à le réparer. Par exemple, si votre barre latérale div a une largeur de 200 pixels, définissez un conteneur div supplémentaire autour du div dans lequel Google Maps écrit son contenu.

Pour que div-container mis

position: absolute; 
left: 200px; 
right: 0; 
height: 100%

fonctionne comme un charme, également lors du redimensionnement. Faites-moi savoir si cette solution ne correspond pas à votre situation.

Source

2012-01-20 15:10:48 Micros

Définir la largeur de la toile google map 100% moins la largeur de la barre latérale?

Répondre

Questions connexes