Comment ouvrir une carte google map en plein écran sur la même page à l'aide de l'Api Google Maps v3?

Donc, ma question est, j'ai une petite carte sur ma page et que je veux ouvrir cette carte en plein écran sur la même page en appuyant sur un bouton et de le fermer de la même manière. Je pense que cela peut être fait en enlevant div styles lorsque vous appuyez sur le bouton, mais je n'ai pas réussi, peut-être que c'est une mauvaise façon? Je comprends que c'est une simple question mais mon google compétences ne sont pas bien développés, et je ne sais pas comment faire pour poser cette question correctement, donc je pose la question ici.

Mon code est tout simplement généré par GoogleMapsTileCutter plus j'ai ajouté un peu de code à partir de ici pour limiter le panoramique. C'est tout le code que j'ai fait.

<!DOCTYPE html>
<html lang="en">
<head>
<title>PS_Bramus.GoogleMapsTileCutter</title>
<meta charset="utf-8" />
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
width:100%;
height:100%;
color: #CCC;
background: #EFEFEF;
}
span.loading {
display: block;
text-align: center;
font: 300 italic 72px/400px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", sans-serif;
}
</style>
</head>
<body>
<div id="map"><span class="loading">loading tiles...</span></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
/*
* = PS_Bramus.GoogleMapsTileCutter Config
* ----------------
*/
var repeatOnXAxis = false; //Do we need to repeat the image on the X-axis? Most likely you'll want to set this to false
/*
* Helper function which normalizes the coords so that tiles can repeat across the X-axis (horizontally) like the standard Google map tiles.
* ----------------
*/
function getNormalizedCoord(coord, zoom) {
if (!repeatOnXAxis) return coord;
var y = coord.y;
var x = coord.x;
//tile range in one direction range is dependent on zoom level
//0 = 1 tile, 1 = 2 tiles, 2 = 4 tiles, 3 = 8 tiles, etc
var tileRange = 1 << zoom;
//don't repeat across Y-axis (vertically)
if (y < 0 || y >= tileRange) {
return null;
}
//repeat across X-axis
if (x < 0 || x >= tileRange) {
x = (x % tileRange + tileRange) % tileRange;
}
return {
x: x,
y: y
};
}
/*
* Main Core
* ----------------
*/
window.onload = function() {
//Define our custom map type
var customMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
var normalizedCoord = getNormalizedCoord(coord, zoom);
if(normalizedCoord && (normalizedCoord.x < Math.pow(2, zoom)) && (normalizedCoord.x > -1) && (normalizedCoord.y < Math.pow(2, zoom)) && (normalizedCoord.y > -1)) {
return zoom + '_' + normalizedCoord.x + '_' + normalizedCoord.y + '.jpg';
} else {
return 'empty.jpg';
}
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 5,
name: 'PS_Bramus.GoogleMapsTileCutter'
});
//Basic options for our map
var myOptions = {
center: new google.maps.LatLng(0, 0),
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
streetViewControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: ["custom"]
}
};
//Init the map and hook our custom map type to it
var map = new google.maps.Map(document.getElementById('map'), myOptions);
map.mapTypes.set('custom', customMapType);
map.setMapTypeId('custom');
//bounds of the desired area
var allowedBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-47,-95.61), 
new google.maps.LatLng(47,95.61)
);
var lastValidCenter = map.getCenter();
google.maps.event.addListener(map, 'center_changed', function() {
if (allowedBounds.contains(map.getCenter())) {
//still within valid bounds, so save the last valid position
lastValidCenter = map.getCenter();
return; 
}
//not valid anymore => return to last valid position
map.panTo(lastValidCenter);
});
}
</script>
</body>

  • Donner un peu de code que vous avez fait jusqu'à présent ?
  • Ajout de code que j'ai fait.
InformationsquelleAutor user2596615 | 2013-12-01
  1. 2

    Si c'est une question de simplement le redimensionnement de votre carte div, puis le code JavaScript suivant devrait vous conduire dans la bonne direction:

    function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.style.height = 100%;
myMap.style.width = 100%;
}

    Remarque que les pourcentages ne sont que par rapport à l'ancêtre des éléments de votre carte div.

    Vous devez mapper les boutons onclick à la resizeMap() et la fonction vous êtes ensemble!

    Si vous vouliez un jQuery approche, c'est ce que le code ci-dessus pourrait ressembler à:

    function resizeMap() {
$("#map-canvas").css({height: 100%, width: 100%});
}

    Pour revenir à la carte de retour à son origine, la largeur et la hauteur, vous pouvez d'abord vérifier si la largeur et la hauteur sont définies à 100%, redimensionner, mais une solution plus élégante serait d'utiliser une classe à la place des styles en ligne, ce qui pourrait ressembler à ce qui suit:

    function resizeMap() {
var myMap = document.getElementById('map-canvas');
myMap.classList.toggle("fullscreen");
}

    Puis dans votre css, vous pouvez avoir:

    .fullscreen {
width: 100%;
height: 100%;
}

    Cliquant sur le bouton juste basculer entre activer la classe sur et en dehors.

    • Ok, mais comment le bouton devrait ressembler, car <button onclick="resizeMap()">plein écran</button> ne fonctionne pas, je pense qu'il est peut-être parce que j'ai installé les styles de la carte-toile de mal?
    • Dans le code que vous avez juste à condition, nous pouvons voir que votre carte div n'a pas un ID de "carte-toile", mais plutôt à "la carte".
    • Et la dernière question est - comment fournir le chargement d'une carte dans une forme cachée? Je demande parce que votre exemple fournit le chargement d'une carte dans un mode plein écran et c'est seulement après que je peux activer l'affichage de la carte en utilisant le bouton, et aussi parce que j'ai essayé de fournir le chargement d'une carte en forme masquée à l'aide de styles css, mais la carte après qui ressemble à ceci. Je n'ai aucune idée pourquoi une partie de la google tuiles ne sont pas chargés, pouvez-vous expliquer pourquoi?
    • De toute façon, je vous remercie. Il m'a vraiment aidé.
    InformationsquelleAutor Dejan Lukić
  2. 0

    Comme ça, les réponses ci-dessus ne fonctionnent pas.
    var mapOptions = {center: myCenter, zoom: 9,fullscreenControl: true};

    InformationsquelleAutor Olav Ask Dybdahl