asked on

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));
}
}
);
}
}

//]]>

ASKER CERTIFIED SOLUTION

MrAgile

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gianitoo

ASKER

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

MrAgile

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

Sean