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.

4 Years
Discussion Span
Last Post by 72dpi

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 topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.