1,105,578 Community Members

Directions and map in separate windows Google maps V3

Member Avatar
Newbie Poster
1 post since Mar 2012
Reputation Points: 0 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]

Hello all,

Im new here and looking for some advice re the google maps javascript API (which im also pretty new at)

The background:

I have managed to get some pages that use the googlemaps interface up and running add markers to them etc and allow the user view directions from there location to any of the markers by directing them to google maps in a separate tab.

The Problem:

My client (boss) likes the maps on my page and the google directions BUT wants the directions to appear in a child window not as part of another page in another tab.
Basically he wants what appears on right side of google maps (the map) on my main window (not a problem) but the left side (the directions stuff that shows routes) in a pop up window.
Been playing about with this for three days now and still cant workout how to do it,
Anyone got any ideas?

Thanks in advance.

P.S not sure if I've posted this in the right place if not apologies.

Member Avatar
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]

You can use an iframe to open the directions page.

Member Avatar
Newbie Poster
11 posts since Nov 2003
Reputation Points: 11 [?]
Q&As Helped to Solve: 0 [?]
Skill Endorsements: 0 [?]

Try this:
Just change your address, and your starting latitude/longitude.
This needs jquery running, so hopefully you use it?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<script src="//ajax.googleapis.com/ajax/libs/jquery/jquery.js?ver=1.7.1"></script>
<script>window.jQuery || document.write("<script src='js/jquery-1.7.1.min.js'>\x3C/script>")</script>

<link rel="stylesheet" type="text/css" media="all" href="style.css" />

<div id="content">
<div id="map-container"></div>
                        <div id="side-container">
                                <li class="dir-label">To:</li>
                                <li><span dir="ltr">565 N Clinton Drive, Milwaukee, WI</span></li>
                                <li class="dir-label">From:</li>
                                <li><input id="from-input" type=text value=""/></li>
                                <li><input id="to-input" type=hidden value="565 N Clinton Drive, Milwaukee, WI"/></li>
                                <li><input id="driveclick" class="darkbox" onclick="Demo.getDirections();" type=button value="Go!"/></li>
                          <p>The driving directions are interactive. Click on any bold text for further explanation of the route.</p>
                            <div id="dir-container"></div>
                        <div class="clear"></div>
                        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

                        <script type="text/javascript">

                        var Demo = {
                         // HTML Nodes
                        mapContainer: document.getElementById('map-container'),
                        dirContainer: document.getElementById('dir-container'),
                        fromInput: document.getElementById('from-input'),
                        toInput: document.getElementById('to-input'),

                        // API Objects
                        dirService: new google.maps.DirectionsService(),
                        dirRenderer: new google.maps.DirectionsRenderer(),
                        map: null,

                        showDirections: function(dirResult, dirStatus) {
                        if (dirStatus != google.maps.DirectionsStatus.OK) {
                            alert('Directions failed: ' + dirStatus);

                         // Show directions

                        getDirections: function() {

                            var fromStr = Demo.fromInput.value;
                            var toStr = Demo.toInput.value;
                            var dirRequest = {
                                origin: fromStr,
                                destination: toStr,
                                travelMode: google.maps.DirectionsTravelMode.DRIVING,
                                                                unitSystem: google.maps.DirectionsUnitSystem.IMPERIAL,
                                                                provideRouteAlternatives: true
                            Demo.dirService.route(dirRequest, Demo.showDirections);

                        init: function() {

                            var latLng = new google.maps.LatLng(-32.054208, 115.879498);
                            Demo.map = new google.maps.Map(Demo.mapContainer, {
                            zoom: 13,
                            center: latLng,
                            mapTypeId: google.maps.MapTypeId.ROADMAP
                            /* test */
                            var contentString = 'Boo!';

                            var infowindow = new google.maps.InfoWindow({
                                content: contentString,
                                maxWidth: 300

                            var marker = new google.maps.Marker({
                                position: latLng,
                                map: Demo.map,
                                draggable: true,
                                animation: google.maps.Animation.DROP

                            google.maps.event.addListener(marker, 'click', function() {

                            /* end test */


        google.maps.event.addDomListener(window, 'load', Demo.init);


Here's some CSS for the divs too:

 -==- driving directions

    width: 33%; float: left;

    width: 60%;
    height: 400px;
    float: right;
    color: #000;
    border:1px solid #eaeaea;

#map-container img {
    background: none repeat scroll 0 0 transparent;
    max-width: 1400px;
    height: auto;

#side-container ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;

#side-container ul li{
    padding: 5px 0;

    font-size: 16px;

#side-container ul li input[type="text"]{
    width: 90%;
    padding: 10px;
    border: 0px solid #fff;
    background: #f5f5f5;

    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border: 0px solid #fff;
    margin-bottom: 30px;
    cursor: pointer;
This article has been dead for over three months: Start a new discussion instead
Start New Discussion
View similar articles that have also been tagged: