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?
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')
window.open ()
document.write ()
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.