[Résolu]Imprimer une carte Google map

nexxen · 30 Octobre 2006

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 ?

LeParrain735 · 30 Octobre 2006

Ce ne serait pas une histoire de feuille de style dédiée à l'impression manquante ?

nexxen · 31 Octobre 2006

non, j'ai vérifié, le pb ne semble pas venir de là...

Franco · 2 Novembre 2006

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.

nexxen · 2 Novembre 2006

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:

LeParrain735 · 2 Novembre 2006

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+

chauchse · 24 Novembre 2010

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>

UsagiYojimbo · 24 Novembre 2010

Mettre des vrais dimensions, pas des dimensions en %