l'api google maps en plein écran
Salut, je suis en train de travailler sur un projet qui nécessite un plein écran google map pour s'asseoir entre un en-tête et pied de page. Je suis sûr que la réponse est assez simple, mais pensé que je voudrais vous demander de toute façon. Le projet consiste en un formulaire où l'utilisateur peut déposer les marqueurs une fois qu'ils ont rempli leur adresse, etc, ne sais pas si tout de la personnalisation aurait pu nuire ou quoi que ce soit...
Quand j'ai travaillé avec l'API google map dans le passé, j'avais normalement, il suffit de changer le css hauteur de 100%, mais pour une raison quelconque au lieu de changer la taille, il supprime la carte entièrement.
#map {
height:500px;
width:1200px;
}
Voici le code.
var map;
var marker;
var Longitude = -1.8822221000000354;
var Latitude = 50.72569620000001;
var zoom = 20;
var bounds = new google.maps.LatLngBounds();
var markers;
var new_marker;
var C;
var popupbubblepath = <%= this.popupbubble.ToString() %>;
var infowindow = new google.maps.InfoWindow();
var ib;
function LoadMap() {
//Create an array of styles.
var styles = [
{
stylers: [
{ saturation: -100 }, { lightness: -100 }
]
},{
featureType: "all",
elementType: "all",
}
];
//Create a new StyledMapType object, passing it the array of styles,
//as well as the name to be displayed on the map type control.
//var styledMap = new google.maps.StyledMapType(styles, {name: "Styled Map"});
var myOptions = {
zoom: zoom,
center: new google.maps.LatLng(Latitude, Longitude),
mapTypeControl: false,
scaleControl: false,
streetViewControl: true,
overviewMapControl: false,
zoomControl: true,
mapTypeControlOptions: {
style:google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position:google.maps.ControlPosition.LEFT_BOTTOM
},
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
panControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map"), myOptions);
OriginalL'auteur user2313573 | 2013-06-12
Vous devez vous connecter pour publier un commentaire.
Le problème est avec votre langage html n'est pas avec votre javascript. essayez de le suivre
Ajouter le code css suivant
Je n'ai pas eu la chance de tester ce moment, mais cela devrait vous donner une idée de ce qui doit être fait.
#map { height: 500px; width: 100%; margin-top: -20px; margin-bottom: 0px; border-bottom: 3px solid #FF5255; } #map_wrapper { height: 100%; width: 100%; }
Avez-vous assurez-vous de régler la hauteur pour le html et le corps à 100%?
jamais l'esprit, je ai réussi à résoudre le problème. Merci quand même bien
OriginalL'auteur Smeegs
Prendre un coup d'oeil ici http://alistapart.com/article/conflictingabsolutepositions à l'aide de positionnement absolu avec réglage en haut, à gauche, en bas, à droite vaules.
Maintenant, faites glisser votre fenêtre au contenu de votre coeur et de regarder votre carte de séjour en taille réelle. Idéal lorsque vous faites sensible dessins aussi.
div
.OriginalL'auteur James Wagoner
La Google Maps API docs expliquer cet effet plutôt proprement:
OriginalL'auteur dma
Je pense que le problème n'est pas avec la carte, comme beaucoup, mais avec la div contenant. Si vous réglez la hauteur de la div à 100% assurez-vous que tous contenant des divs, d'une hauteur définie. Vous pouvez dire si c'est le problème en mettant une bordure autour de la div, vous peut voir que la hauteur est le problème.
Il serait plus facile à résoudre si vous pouvez l'obtenir pour nous de jouer avec.
OriginalL'auteur Richard Askew
Quand vous voulez avoir un vide
div
qui prennent tout l'écran en hauteur, vous devez définir lemin-height
valeur, comme ci-dessous :Mais encore une fois, ce n'est pas vraiment liée à "google-maps-api-3'...
OriginalL'auteur Florent Vielfaure