?
Solved

google map api get directions

Posted on 2008-11-10
3
Medium Priority
?
1,046 Views
Last Modified: 2012-05-05
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));
                    }
                }
            );
            }
        }

        //]]>
0
Comment
Question by:gianitoo
  • 2
3 Comments
 
LVL 8

Accepted Solution

by:
MrAgile earned 2000 total points
ID: 22936171
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
 
LVL 1

Author Comment

by:gianitoo
ID: 22951066
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
 
LVL 8

Expert Comment

by:MrAgile
ID: 22955219
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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

It was really hard time for me to get the understanding of Delegates in C#. I went through many websites and articles but I found them very clumsy. After going through those sites, I noted down the points in a easy way so here I am sharing that unde…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 2 hours left to enroll

807 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question