Zhou 周 | 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 :
- <!DOCTYPE html />
- <html>
- <head>
- <title>Google maps API demo</title>
- <link href='http://fonts.googleapis.com/css?family=Terminal+Dosis:800,600' rel='stylesheet' type='text/css'>
- <style type="text/css">
- body {
- font-family: 'Terminal Dosis', sans-serif;
- font-size: 18px;
- color: #333;
- background: #CCC; /* background color */
- padding: 0;
- margin: 10px 0px;
- overflow-y: scroll;
- }
- td {
- font-size: 18px;
- }
- h1 {
- text-align: center;
- font-family: 'Terminal Dosis', sans-serif;
- font-size: 60px;
- color: #EEEEEE;
- text-shadow: 0px -1px 0px #AAA, 0px 1px 0px #EEEEEE;
- margin: 0px 0px 20px 0px;
- }
- input {
- font-family: 'Terminal Dosis', sans-serif;
- font-size: 22px;
- padding: 7px 8px;
- border: 0px;
- box-shadow: 0px 0px 6px #999;
- border-radius: 10px;
- }
- input[type="text"] {
- width: 300px;
- }
- input[type="submit"] {
- padding: 6px 20px;
- margin-left: 10px;
- }
- #routeForm {
- width: 100%;
- text-align: center;
- margin-top: 20px;
- }
- #directionsPanel {
- background: #FFFFFF;
- width: 800px;
- padding: 20px;
- margin: 0 auto;
- box-shadow: 0px 0px 6px #999;
- border-radius: 10px;
- font-size: 20px;
- }
- .adp-directions {
- width: 100%;
- }
- </style>
- <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
- <script type="text/javascript">
- var directionDisplay;
- var directionsService = new google.maps.DirectionsService();
- function initialize() {
- var latlng = new google.maps.LatLng(51.764696,5.526042);
- directionsDisplay = new google.maps.DirectionsRenderer();
- var myOptions = {
- zoom: 14,
- center: latlng,
- mapTypeId: google.maps.MapTypeId.ROADMAP,
- mapTypeControl: false
- };
- var map = new google.maps.Map(document.getElementById("map_canvas" ),myOptions);
- directionsDisplay.setMap(map);
- directionsDisplay.setPanel(document.getElementById("directionsPanel" ));
- var marker = new google.maps.Marker({
- position: latlng,
- map: map,
- title:"Van Dijk Bouw & Techniek"
- });
- }
- function calcRoute() {
- var start = document.getElementById("routeStart" ).value;
- var end = "51.764696,5.526042";
- var request = {
- origin:start,
- destination:end,
- travelMode: google.maps.DirectionsTravelMode.DRIVING
- };
- directionsService.route(request, function(response, status) {
- if (status == google.maps.DirectionsStatus.OK) {
- directionsDisplay.setDirections(response);
- }
- });
- }
- </script>
- </head>
- <body onLoad="initialize()">
- <h1>Google maps API demo</h1>
- <div id="map_canvas" style="width:100%; height:300px"></div>
- <form action="/routebeschrijving" onSubmit="calcRoute();return false;" id="routeForm">
- <input type="text" id="routeStart" value="">
- <input type="submit" value="Calculate route">
- </form>
- <div id="directionsPanel">
- Enter a destination and click "Calculate route".
- </div>
- </body>
- </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 :
- feuille_route=window.open('','','location=no, menubar=no, status=no, width=550, height=300');
- feuille_route.document.write('<<div id="directionsPanel"></div>');
- feuille_route.focus();
- directionsDisplay.setPanel(feuille_route.document.getElementById('directionsPanel'));
- 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 
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.
|
