[Résolu]Imprimer une carte Google map

WRInaute discret
Bonjour à tous,

J'ai incorporé une carte avec l'api google map sur le site d'un client.
Tout marche impec...sauf l'impression :evil:
La carte ne s'affiche pas quand on effectue un "Appercu avant impression"

Est-ce que vous savez comment faire pour résoudre ce pb ?
 
WRInaute impliqué
Ah ?

Bizarre, j'ai deux sites sur lesquels j'ai aussi des cartes maps avec l'api et je n'ai aucun problème.

J'ajoute que je n'ai rien fait de particulier.
 
WRInaute discret
Le pb venait bien de la feuille de style !

Contrairement à ce que j'ai répondu un peu vite à LeParrain735, le problème venait bien de la feuille de style dédiée à l'impression:
Il faut absolument redonner des dimension (width et height) à l'elément qui va contenir la carte ! (ce qui en soit n'est pas illogique, l'api remplaçant le contenu de cet élément...et se servant de ses dimensions pour afficher la carte).

Merci pour vos réponses, elles m'ont obligé à me bouger un peu le c...l pour trouver une solution :wink:
 
WRInaute discret
Re: Le pb venait bien de la feuille de style !

nexxen a dit:
Il faut absolument redonner des dimension (width et height) à l'elément qui va contenir la carte ! (ce qui en soit n'est pas illogique, l'api remplaçant le contenu de cet élément...et se servant de ses dimensions pour afficher la carte).

Cool, merci de nous avoir partagé la solution.
Content d'avoir pu t'aider! :wink:

A+
 
Nouveau WRInaute
Bonjour,

Je rencontre le même problème, la carte ne s'affiche pas à l'impression.
J'ai bien essayé de donner des dimension à l'élément contenant la carte, mais cela ne change rien
Code:
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
J'ai également essayé de modifier ces valeurs en attribuant des dimensions fixes, mais sans succès.

Je bloque, quelqu'un aurait une idée?

Merci d'avance
Ci joint le contenu de ma page
Code:
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.co.uk/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var startPoint = new google.maps.LatLng(48.788398600,2.406395900);
var endPoint = new google.maps.LatLng(48.826243500,2.387170400);
  var rendererOptions = {
    draggable: true
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);;
  var directionsService = new google.maps.DirectionsService();
  var map;
 
 
  function initialize() {
 
    var myOptions = {
      zoom: 6,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: endPoint
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById("directionsPanel"));
 
    google.maps.event.addListener(directionsDisplay, 'directions_changed', function() {
      computeTotalDistance(directionsDisplay.directions);
    });
    
    calcRoute();
  }
 
  function calcRoute() {
 
    var request = {
      origin: startPoint,
      destination: endPoint,
      travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
 
  function computeTotalDistance(result) {
    var total = 0;
    var myroute = result.routes[0];
    for (i = 0; i < myroute.legs.length; i++) {
      total += myroute.legs[i].distance.value;
    }
    total = total / 1000.
    document.getElementById("total").innerHTML = total + " km";
  }   
</script>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:10px;}

/**
@media print {
.print { display: none; }
  }
  *//
</style>
</head>
<body onLoad="initialize()">
<div id="map_canvas" style="float:left;width:70%; height:100%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:100%">

<!--
<p class="print" align="center"><input type="button" name="bt_print" value="Imprimer" onClick="javascript:print();"/> </p>
-->
<p>Total Distance en kms: <span id="total"></span></p>
</div>
</body>
</html>

</head>
<body style="margin:0px; padding:0px;" onLoad="initialize();">
<div id="mode" onchange="calcRoute();"></div>
  <div id="map_canvas" style="width:100%; height:100%;">
  </div>
</body>
</html>
 
Discussions similaires
Haut