Member Avatar for Captain_Ludd

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.

  • 3 Contributors
  • 2 Replies
  • 261 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by 72dpi
Member Avatar for AleMonteiro

You can use an iframe to open the directions page.

Member Avatar for 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">
<head>
<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" />
</head>

<body>
<div id="content">
<div id="map-container"></div>
                        <div id="side-container">
                            <ul>
                                <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>
                            </ul>
                          <p>The driving directions are interactive. Click on any bold text for further explanation of the route.</p>
                            <div id="dir-container"></div>
                        </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);
                            return;
                        }

                         // Show directions
                        Demo.dirRenderer.setMap(Demo.map);
                        Demo.dirRenderer.setPanel(Demo.dirContainer);
                        Demo.dirRenderer.setDirections(dirResult);
                        },

                        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() {
                            infowindow.open(Demo.map,marker);
                            });




                            /* end test */

                    }
                };



        google.maps.event.addDomListener(window, 'load', Demo.init);
                </script>
</div>

</body>
</html>

Here's some CSS for the divs too:

/************************************************************************
 -==- driving directions
 *************************************************************************/

#side-container{
    width: 33%; float: left;
}

#map-container{
    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;
}

li.dir-label{
    font-size: 16px;
    font-weight:bold;
}

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

input#driveclick{
    padding: 10px 20px;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    border: 0px solid #fff;
    margin-bottom: 30px;
    cursor: pointer;
}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.