Javascript contenu fenêtre contextuelle?

Javascript contenu fenêtre contextuelle? - HTML/CSS - Programmation

Marsh Posté le 12-11-2013 à 02:34:37    

Bonsoir à tous,  
 
On m'a demandé de réaliser un site web pour un cabinet dentaire avec un Google Map et un calcul d'itinéraire.  
J'ai pu récupéré cet exemple en cherchant à gauche à droite.
 
Est-ce possible d'afficher le contenu de la div "directionsPanel" dans une fenêtre contextuelle?  
 

Code :
  1. <!DOCTYPE html />
  2. <html>
  3. <head>
  4. <title>Google maps API demo</title>
  5. <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800,600' rel='stylesheet' type='text/css'>
  6. <style type="text/css">
  7. body {
  8.  font-family: 'Terminal Dosis', sans-serif;
  9.  font-size: 18px;
  10.  color: #333;
  11.  background: #CCC; /* background color */
  12.  padding: 0;
  13.  margin: 10px 0px;
  14.  overflow-y: scroll;
  15. }
  16. td {
  17.  font-size: 18px;
  18. }
  19. h1 {
  20.  text-align: center;
  21.  font-family: 'Terminal Dosis', sans-serif;
  22.  font-size: 60px;
  23.  color: #EEEEEE;
  24.  text-shadow: 0px -1px 0px #AAA, 0px 1px 0px #EEEEEE;
  25.  margin: 0px 0px 20px 0px;
  26. }
  27. input {
  28.  font-family: 'Terminal Dosis', sans-serif;
  29.  font-size: 22px;
  30.  padding: 7px 8px;
  31.  border: 0px;
  32.  box-shadow: 0px 0px 6px #999;
  33.  border-radius: 10px;
  34. }
  35. input[type="text"] {
  36.  width: 300px;
  37. }
  38. input[type="submit"] {
  39.  padding: 6px 20px;
  40.  margin-left: 10px;
  41. }
  42. #routeForm {
  43.  width: 100%;
  44.  text-align: center;
  45.  margin-top: 20px;
  46. }
  47. #directionsPanel {
  48.  background: #FFFFFF;
  49.  width: 800px;
  50.  padding: 20px;
  51.  margin: 0 auto;
  52.  box-shadow: 0px 0px 6px #999;
  53.  border-radius: 10px;
  54.  font-size: 20px;
  55. }
  56. .adp-directions {
  57.  width: 100%;
  58. }
  59. </style>
  60. <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  61.     <script type="text/javascript">
  62. var directionDisplay;
  63. var directionsService = new google.maps.DirectionsService();
  64. function initialize() {
  65.  var latlng = new google.maps.LatLng(51.764696,5.526042);
  66.  directionsDisplay = new google.maps.DirectionsRenderer();
  67.  var myOptions = {
  68.   zoom: 14,
  69.   center: latlng,
  70.   mapTypeId: google.maps.MapTypeId.ROADMAP,
  71.   mapTypeControl: false
  72.  };
  73.  var map = new google.maps.Map(document.getElementById("map_canvas" ),myOptions);
  74.  directionsDisplay.setMap(map);
  75.  directionsDisplay.setPanel(document.getElementById("directionsPanel" ));
  76.  var marker = new google.maps.Marker({
  77.   position: latlng,
  78.   map: map,
  79.   title:"Van Dijk Bouw & Techniek"
  80.  });
  81. }
  82. function calcRoute() {
  83.  var start = document.getElementById("routeStart" ).value;
  84.  var end = "51.764696,5.526042";
  85.  var request = {
  86.   origin:start,
  87.   destination:end,
  88.   travelMode: google.maps.DirectionsTravelMode.DRIVING
  89.  };
  90.  directionsService.route(request, function(response, status) {
  91.   if (status == google.maps.DirectionsStatus.OK) {
  92.    directionsDisplay.setDirections(response);
  93.   }
  94.  });
  95. }
  96. </script>
  97. </head>
  98. <body onLoad="initialize()">
  99. <h1>Google maps API demo</h1>
  100. <div id="map_canvas" style="width:100%; height:300px"></div>
  101. <form action="/routebeschrijving" onSubmit="calcRoute();return false;" id="routeForm">
  102.  <input type="text" id="routeStart" value="">
  103.  <input type="submit" value="Calculate route">
  104. </form>
  105. <div id="directionsPanel">
  106.  Enter a destination and click "Calculate route".
  107. </div>
  108. </body>
  109. </html>


 
Voici le lien de la page http://pastebin.com/download.php?i=WdaijFxh
 
J'ai essayé d’insérer à partir de la ligne 93 les lignes suivantes:    
 

Code :
  1. feuille_route=window.open('','','location=no, menubar=no, status=no, width=550, height=300');
  2. feuille_route.document.write('<<div id="directionsPanel"></div>');
  3. feuille_route.focus();
  4. directionsDisplay.setPanel(feuille_route.document.getElementById('directionsPanel'));
  5. directionsDisplay.setDirections(response);


 
Mais rien n'y fait.  
 
Il y a bien eu un moment où j'ai pu avoir un résultat sur Chrome et sur FireFox, en appelant la fonction "calcRoute();" à la fin de la fonction "initialize();" si j'ai bonne mémoire. Mais j'ai vite oublié l'idée car sur IE... La fenêtre contextuelle était vide.  
 
Pouvez-vous m'aider, m'aiguiller?  
 
Merci  :hello:


Message édité par Zhou le 12-11-2013 à 02:34:49

---------------
On est toujours l'imbécile de quelqu'un. Ce sont mes imbéciles à moi, qui m'énervent.
Reply

Marsh Posté le 12-11-2013 à 02:34:37   

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed