[Résolu]Imprimer une carte Google map

Consultez la formation à Google Analytics de WebRankInfo / Ranking Metrics

nexxen
WRInaute discret
WRInaute discret
 
Messages: 76
Inscription: 30 Déc 2004

[Résolu]Imprimer une carte Google map

Message le Lun Oct 30, 2006 19:00

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 ?
Dernière édition par nexxen le Jeu Nov 02, 2006 17:20, édité 1 fois.

LeParrain735
WRInaute discret
WRInaute discret
 
Messages: 153
Inscription: 11 Fév 2006

Message le Lun Oct 30, 2006 22:21

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

nexxen
WRInaute discret
WRInaute discret
 
Messages: 76
Inscription: 30 Déc 2004

Message le Mar Oct 31, 2006 11:44

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

Franco
WRInaute impliqué
WRInaute impliqué
 
Messages: 814
Inscription: 2 Oct 2004

Message le Jeu Nov 02, 2006 15:09

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
WRInaute discret
WRInaute discret
 
Messages: 76
Inscription: 30 Déc 2004

Le pb venait bien de la feuille de style !

Message le Jeu Nov 02, 2006 17:19

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
WRInaute discret
WRInaute discret
 
Messages: 153
Inscription: 11 Fév 2006

Re: Le pb venait bien de la feuille de style !

Message le Jeu Nov 02, 2006 18:22

nexxen a écrit: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
Nouveau WRInaute
Nouveau WRInaute
 
Messages: 2
Inscription: 26 Fév 2008

Re: [Résolu]Imprimer une carte Google map

Message le Mer Nov 24, 2010 13:59

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: Tout sélectionner
<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: Tout sélectionner
<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
WRInaute accro
WRInaute accro
 
Messages: 10419
Inscription: 23 Nov 2005

Re: [Résolu]Imprimer une carte Google map

Message le Mer Nov 24, 2010 14:12

Mettre des vrais dimensions, pas des dimensions en %


Si vous avez aimé cette discussion, partagez-la sur vos réseaux sociaux préférés :

Formation recommandée sur ce thème :

Formation Google Analytics : en 2 jours, apprenez comment exploiter l'essentiel des possibilités de l'outil de mesure d'audience de Google. Formation animée par les experts Google Analytics de Ranking Metrics.

Tous les détails sur le site Ranking Metrics : programme, prix, dates et lieux, inscription en ligne.

Lectures recommandées sur ce thème :