google map api get directions

This code below.  loads markers from xml.   how can i add the get directions functionality so when they click on marker and pops up the info, then it also gives you the "get directions from to " ??



 <script type="text/javascript">

        //<![CDATA[

        function load() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("map"));
                map.addControl(new GSmallMapControl());
                map.addControl(new GMapTypeControl());
                map.setCenter(new GLatLng(39.953845, -86.278370), 16);
                // Create our "tiny" marker icon
                var icon = new GIcon();
                icon.image = "http://labs.google.com/ridefinder/images/mm_20_red.png";
                icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                icon.iconSize = new GSize(12, 20);
                icon.shadowSize = new GSize(22, 20);
                icon.iconAnchor = new GPoint(6, 20);
                icon.infoWindowAnchor = new GPoint(5, 1);

                function createMarker(point, number, html, exist) {
                    var marker;
                    if (exist) marker = new GMarker(point, icon);
                    else marker = new GMarker(point);
                    GEvent.addListener(
            marker, "click", function() { marker.openInfoWindowHtml(html); }
          );
                    return marker;
                }

                //data.xml looks like this
                //<markers>
                //<marker lat="-43.534" lng="172.638" label="Site A" exist="1" />
                //<marker lat="-43.545" lng="172.635" label="Site B" exist="0"/>
                //<marker lat="-43.507" lng="172.728" label="Site C" exist="0"/>
                //</markers>

                GDownloadUrl("XMLFile.xml", function(data) {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                        var html = markers[i].getAttribute("label");
                        var exist = markers[i].getAttribute("exist");
                        map.addOverlay(createMarker(point, i, html, exist));
                    }
                }
            );
            }
        }

        //]]>
LVL 1
gianitooAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

MrAgileCommented:
Hi There,

You can use the code below to script links into the info window. You can have form fields inside the info window.

http://econym.org.uk/gmap/directions.htm

Hope this helps. Sean
 html += '<br> <a href="http://maps.google.com/maps?saddr=&daddr=' + point.toUrlValue() + '" target ="_blank">Get Directions to somwwhere:</a>';

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
gianitooAuthor Commented:
Can you looked at my  new code and help me spot the error??
I know i am very close

<script type="text/javascript">
 
        //<![CDATA[
 
        function load() {
            if (GBrowserIsCompatible()) {
                var map = new GMap2(document.getElementById("mapcanvas"));
                // map.addControl(new GSmallMapControl());
                map.setCenter(new GLatLng(39.953845, -86.278370), 3);
                map.addControl(new GMapTypeControl());
                map.addControl(new GLargeMapControl());
               //map.enableScrollWheelZoom();
               map.enableContinuousZoom();  
                
               // new GKeyboardHandler(map);
               // map.enableScrollWheelZoom();
                //map.enableContinuousZoom();  
                // Create our "tiny" marker icon
                var icon = new GIcon();
                icon.image = "http://www.google.com/mapfiles/marker.png";
                icon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
                icon.iconSize = new GSize(16, 26);
                icon.shadowSize = new GSize(22, 20);
                icon.iconAnchor = new GPoint(6, 20);
                icon.infoWindowAnchor = new GPoint(5, 1);
 
                //code
                var gmarkers = [];
                var cholos = [];
                var to_cholos = [];
                var from_cholos = [];
                var i = 0;
 
                //end code
                
 
                function createMarker(point, i, html, exist, addr1, addr2, name, city, state, zip, phone, contact, addr,cholo) {
                    addr = escape(addr);
                    addr2 = escape(addr2);
                   // name = escape(name);
                    city = escape(city);
                    state = escape(state);
 
                    var marker;
                    if (exist) marker = new GMarker(point, icon);
                    else marker = new GMarker(point);
 
                    //code
                    // The info window version with the "to here" form open
                    to_cholos[i] = cholo + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
                    // "(" + name + ")" + 
           '"/>';
                    // The info window version with the "to here" form open
                    from_cholos[i] = cholo + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' +
           '<INPUT value="Get Directions" TYPE="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                    // "(" + name + ")" + 
           '"/>';
                    // The inactive version of the direction info
                    cholo = cholo + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <a href="javascript:fromhere(' + i + ')">From here</a>';
 
                  //end code  
                    
                    
                    
                    
                    
                    GEvent.addListener(
            marker, "click", function() { marker.openInfoWindowHtml('<span class=titleboldorange>' + name + '</span><br>' + '<b>Contact:</b> ' + contact + '<br>' + '<b>Address:</b> ' + addr1 + '<br>' + '<b>City:</b> ' + city + '<br>' + '<b>State:</b> ' + state + '<br>' + '<b>Zip:</b> ' + zip + '<br>' + '<b>Phone:</b> ' + phone + '<br>' + '<a target=_blank href=http://maps.google.com/maps?q=' + addr + '>Directions</a>'+cholo); }
          );
                    // ===== request the directions =====
                    gmarkers[i] = marker;
                    cholos[i] = cholo;
                    i++;
                    // ===== request the directions =====
                    return marker;
 
         
                // ===== request the directions =====
                function getDirections() {
                    var saddr = document.getElementById("saddr").value
                    var daddr = document.getElementById("daddr").value
                    var gdir = new GDirections(map, document.getElementById("directions"));
                    gdir.load("from: " + saddr + " to: " + daddr, { getPolyline: true });
 
                }
 
 
                // This function picks up the click and opens the corresponding info window
                function myclick(i) {
                    gmarkers[i].openInfoWindowHtml(cholos[i]);
                }
 
                // functions that open the directions forms
                function tohere(i) {
                    gmarkers[i].openInfoWindowHtml(to_cholos[i]);
                }
                function fromhere(i) {
                    gmarkers[i].openInfoWindowHtml(from_cholos[i]);
                }
                // ===== end request the directions =====
            
                GDownloadUrl("xml.aspx", function(data) {
                    var xml = GXml.parse(data);
                    var markers = xml.documentElement.getElementsByTagName("marker");
                    for (var i = 0; i < markers.length; i++) {
                        var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
                        var html = markers[i].getAttribute("label");
                        var name = markers[i].getAttribute("name");
                        var exist = markers[i].getAttribute("exist");
                        var addr = markers[i].getAttribute("addr1") +' ,'+ markers[i].getAttribute("city")+' '+ markers[i].getAttribute("state");
                        var addr1 = markers[i].getAttribute("addr1");
                        var addr2 = markers[i].getAttribute("addr2");
                        var city = markers[i].getAttribute("city");
                        var state = markers[i].getAttribute("state");
                        var zip = markers[i].getAttribute("zip");
                        var contact = markers[i].getAttribute("contact");
                        var phone = markers[i].getAttribute("phone");
                        map.addOverlay(createMarker(point, i, html, exist,addr1,addr2,name,city,state,zip,phone,contact,addr));
                    }
                }
            );
            }
        }
 
        //]]>
    </script>

Open in new window

0
MrAgileCommented:
send me a link that I can see. is it a javascript error or is the map not showing. I need more information.

Sean
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.