[Résolu]Imprimer une carte Google map

Discussion dans 'Google : l'entreprise, les sites web, les services' créé par nexxen, 30 Octobre 2006.

  1. nexxen
    nexxen WRInaute discret
    Inscrit:
    30 Décembre 2004
    Messages:
    73
    J'aime reçus:
    0
    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 ?
     
  2. LeParrain735
    LeParrain735 WRInaute discret
    Inscrit:
    11 Février 2006
    Messages:
    121
    J'aime reçus:
    0
    Ce ne serait pas une histoire de feuille de style dédiée à l'impression manquante ?
     
  3. nexxen
    nexxen WRInaute discret
    Inscrit:
    30 Décembre 2004
    Messages:
    73
    J'aime reçus:
    0
    non, j'ai vérifié, le pb ne semble pas venir de là...
     
  4. Franco
    Franco WRInaute impliqué
    Inscrit:
    2 Octobre 2004
    Messages:
    529
    J'aime reçus:
    0
    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.
     
  5. nexxen
    nexxen WRInaute discret
    Inscrit:
    30 Décembre 2004
    Messages:
    73
    J'aime reçus:
    0
    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:
     
  6. LeParrain735
    LeParrain735 WRInaute discret
    Inscrit:
    11 Février 2006
    Messages:
    121
    J'aime reçus:
    0
    Re: Le pb venait bien de la feuille de style !

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

    A+
     
  7. chauchse
    chauchse Nouveau WRInaute
    Inscrit:
    26 Février 2008
    Messages:
    1
    J'aime reçus:
    0
    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>
     
  8. UsagiYojimbo
    UsagiYojimbo WRInaute accro
    Inscrit:
    23 Novembre 2005
    Messages:
    12 010
    J'aime reçus:
    133
    Mettre des vrais dimensions, pas des dimensions en %
     
Chargement...
Similar Threads - [Résolu]Imprimer carte Google Forum Date
La carte des cyberattaques dans le monde en temps réel... Le café de WebRankInfo 1 Mars 2022
Programme affiliation carte grise Monétisation d'un site web 20 Mai 2020
MyBusiness : établissement qui n'apparait pas sur la carte alors qu'il est référencé YouTube, Google Images et Google Maps 5 Février 2020
Ajouter un texte sur une carte Google Maps (JS) Développement d'un site Web ou d'une appli mobile 15 Janvier 2020
Système de tirage de carte aléatoire Développement d'un site Web ou d'une appli mobile 27 Août 2019
Carte de crédit Le café de WebRankInfo 25 Janvier 2018
Impossible d'ajouter le paiement via compte bancaire et carte bancaire rejetée Facebook 30 Octobre 2017
Carte Interactive et Référencement Débuter en référencement 11 Juillet 2017
Cartes de paiement Adwords : payooner, cryptopay, entropay, skirll AdWords 28 Mai 2017
Couleurs de pays et survol sur carte GG Maps YouTube, Google Images et Google Maps 10 Février 2017
Différence données structurées et cartes enrichies Débuter en référencement 8 Janvier 2017
kimsufi mode rescue suite a Carte mere HS Administration d'un site Web 30 Juillet 2016
Les cartes enrichies sur Google (Rich Cards) Référencement Google 19 Mai 2016
Problème d'affichage de la carte sur Google : Google maps / Google mon entreprise Référencement Google 7 Mai 2016
Apparaitre dans la carte google map lors d'une recherche YouTube, Google Images et Google Maps 28 Novembre 2015
[résolu] Carte Google Maps avec "zones de densité" Développement d'un site Web ou d'une appli mobile 5 Novembre 2015
Paiement par carte bancaire sur WooCommerce ? e-commerce 21 Mai 2015
Faire apparaitre une carte géographique ds le SERP Débuter en référencement 18 Mai 2015
Carte Interactive région sous Wordpress Développement d'un site Web ou d'une appli mobile 17 Février 2015
Besoin d'avis sur ma boutique de carte à collectionner. Demandes d'avis et de conseils sur vos sites 28 Octobre 2014