Google Directions only, in popup
Got my google maps and running direction etc, was very happy with it considering i am the first web developer. Only one problem, when I showed it to the client (boss), he liked it but wanted the directions to show as is, but not a separate tab in the popup panel. Basically save the map as it is and display the routing information in a popup when clicking "show route" I was able to get all the routing information and display it in a movable div, but that's not what it wants. Does anyone I know do the same, including only directions in a separate popup? or a tutorial on this topic? He wants to see him as soon as possible, so I'm against him and any help would be very grateful to everyone.
Update: As suggested by Dr Molles Hid the original div containing the info and tried to add it to the popup
using the following code:
enter code herefunction directionsWindow () {
// get the div containing the direction information from the google
// maps direction service
var divToShow=document.getElementById('directions');
// store the returned div in a variable
var htmlToDisplay = document.getElementById('directions').innerHTML
// get the html contained in the div and store it in a variable
win=window.open('about:blank','instructions','width=1000,height=1000');
// open a new window
doc=win.document;
// create a new div
var divToDisplay = doc.createElement('div');
// set its id to directions
divToDisplay.id = "directions";
// set its html to that of the div in the parent document
divToDisplay.innerHTML = htmlToDisplay;
// append the div to the window
doc.body.appendChild(divToDisplay);
doc.open();
doc.close();
}
but that doesn't seem to work as the htmlToDisplay is empty, even though I know the div exists and has content (I see it to begin with). Can anyone shed some light?
source to share
Open the window and write the instructions in the document:
win=window.open('about:blank','instructions','width=300,height=200');
doc=win.document;
doc.open();
doc.write('<div id="instructions">instructions</div>');
doc.close();
//reference to the div inside the popup
//->doc.getElementById('instructions')
source to share
Just to let people know that I was able to get my directions in a separate "window". I had to use jquery to show and hide the div I was using to show directions and then drag again with jquery. Works well, I can now view each of the waypoints on the map and show the alternate roots that I could not use using only the new window popup.
source to share