asked on

Google Maps with jQuery

I am using jQuery GPS - http://www.birdwingfx.com/jQuery_gps/index.html to add a google map to a site. Though it's working great I'm not entirely happy with two features or lack thereof. I was wondering if I could get help modifying it so I could do the following:

jQuery GPS allows for adding a custom map marker, but the default shadow remains. I was able to create a custom marker and code at http://www.powerhut.co.uk/googlemaps/custom_markers.php that I would like to integrate it into the jQuery GPS script. (See code at very bottom)

The second issue is: the info window (or tooltip as this script calls it) is open by default when the page loads. Usually if you close this window a user can reopen it by clicking on the map marker. This script doesn't have that ability and I would like to modify it so that it does.

Cheers!
Jules

// jQuery GPS - http://www.birdwingfx.com/jQuery_gps/index.html

(function($) {
    
    $.GoogleMapObjectDefaults = {        
        zoomLevel: 10,
	imagewidth: 50,
	imageheight: 50,
	center: '37 103rd Ave. N.E. Bellevue, WA   98004',
	start: '#start',
        end: '#end',
	directions: 'directions',
        submit: '#getdirections',
	tooltip: 'false',
	image: 'false'
    };

    function GoogleMapObject(elementId, options) {
        /* private variables */
        this._inited = false;
        this._map = null;
        this._geocoder = null;
	
        /* Public properties */
        this.ElementId = elementId;
        this.Settings = $.extend({}, $.GoogleMapObjectDefaults, options || '');
    }

    $.extend(GoogleMapObject.prototype, {
        init: function() {
            if (!this._inited) {
                if (GBrowserIsCompatible()) {
                    this._map = new GMap2(document.getElementById(this.ElementId));
                    this._map.addControl(new GSmallMapControl());
                    this._geocoder = new GClientGeocoder();
                }
		
                this._inited = true;
            }
        },
        load: function() {
            //ensure existence
            this.init();
	    
            if (this._geocoder) {
                //"this" will be in the wrong context for the callback
                var zoom = this.Settings.zoomLevel;
                var center = this.Settings.center;
		var width = this.Settings.imagewidth;
		var height = this.Settings.imageheight;
                var map = this._map;
		
		if (this.Settings.tooltip != 'false') {
		    var customtooltip = true;
		    var tooltipinfo = this.Settings.tooltip;
		}
		
		if (this.Settings.image != 'false') {
		    var customimage = true;
		    var imageurl = this.Settings.image;
		}
		
                this._geocoder.getLatLng(center, function(point) {
                    if (!point) { alert(center + " not found"); }
                    else {
                        //set center on the map
                        map.setCenter(point, zoom);
			
			if (customimage == true) {
			    //add the marker
			    var customiconsize = new GSize(width, height);
			    var customicon = new GIcon(G_DEFAULT_ICON, imageurl);
			    customicon.iconSize = customiconsize;
			    var marker = new GMarker(point, { icon: customicon });
			    map.addOverlay(marker);
			} else {
			    var marker = new GMarker(point);
			    map.addOverlay(marker);
			}
			
			if(customtooltip == true) {
			    marker.openInfoWindowHtml(tooltipinfo);
			}
                    }
                });
            }
	    
	    
            //make this available to the click element
            $.data($(this.Settings.submit)[0], 'inst', this);
	    
            $(this.Settings.submit).click(function(e) {
                e.preventDefault();
                var obj = $.data(this, 'inst');
		var outputto = obj.Settings.directions;
                var from = $(obj.Settings.start).val();
                var to = $(obj.Settings.end).val();
		map.clearOverlays();
		var gdir = new GDirections(map, document.getElementById(outputto));
		gdir.load("from: " + from + " to: " + to);
		
                //open the google window
                //window.open("http://maps.google.com/maps?saddr=" + from + "&daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
            });
	    
            return this;
        }
    });

    $.extend($.fn, {
        googleMap: function(options) {
            // check if a map was already created
            var mapInst = $.data(this[0], 'googleMap');
            if (mapInst) {
                return mapInst;
            }
	    
            //create a new map instance
            mapInst = new GoogleMapObject($(this).attr('id'), options);
            $.data(this[0], 'googleMap', mapInst);
            return mapInst;
        }
    });
})(jQuery);


// javascript call
// BEGIN Google Map script ------------------------------------------------------------------>
$(document).ready(function() {
	$("#google-map").googleMap({
			zoomLevel: 15,
			imagewidth: 27,
			imageheight: 50,			
			image: 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/image.png',
			center: '37 103rd Ave. N.E. Bellevue, WA   98004',
			tooltip: '<strong>Massage Center of Bellevue</strong><br />37 103rd Ave. N.E., Suite A<br />Bellevue, WA  98004<br /><br /><strong>Office:</strong> (425) 451-1171<br /><strong>Fax:</strong> (425) 451-1232<br /><br /><strong>Hours:</strong><br />Monday-Friday: 8:00AM - 8:00PM<br />Saturday: 10:00AM - 6:00PM'	
	}).load();
});
// END Google Map script -------------------------------------------------------------------->



// Google Map Custom Marker Maker 2009
// Please include the following credit in your code

// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php

var myIcon = new GIcon();
myIcon.image = 'markers/image.png';
myIcon.shadow = 'markers/shadow.png';
myIcon.iconSize = new GSize(27,50);
myIcon.shadowSize = new GSize(52,50);
myIcon.iconAnchor = new GPoint(27,50);
myIcon.infoWindowAnchor = new GPoint(14,0);
myIcon.printImage = 'markers/printImage.gif';
myIcon.mozPrintImage = 'markers/mozPrintImage.gif';
myIcon.printShadow = 'markers/printShadow.gif';
myIcon.transparent = 'markers/transparent.png';
myIcon.imageMap = [14,0,15,1,15,2,24,3,24,4,25,5,25,6,24,7,23,8,22,9,21,10,20,11,19,12,18,13,17,14,16,15,16,16,16,17,17,18,17,19,17,20,17,21,17,22,18,23,18,24,18,25,18,26,17,27,17,28,17,29,17,30,17,31,17,32,17,33,17,34,17,35,17,36,16,37,16,38,16,39,16,40,15,41,15,42,14,43,13,44,13,45,11,46,10,47,10,48,9,48,9,47,9,46,10,45,10,44,10,43,9,42,9,41,9,40,8,39,8,38,8,37,7,36,7,35,8,34,7,33,7,32,7,31,7,30,7,29,8,28,8,27,8,26,8,25,9,24,9,23,10,22,10,21,10,20,10,19,10,18,10,17,11,16,11,15,10,14,9,13,8,12,7,11,6,10,4,9,1,8,2,7,2,6,2,5,11,4,11,3,12,2,12,1,13,0];

Open in new window

Pawel Witkowski

Ok first of all... I analyse this script and I'm really not pleasant with it... Do you really need to use it? Because there is alot of bugs....

Anyway I can help you achieve what you want, but script anyway is buggy :/

This code should help you. First of all I change an order of execution of googleMap on document ready so it can take a icon that you've created as an parameter. Then I change a function to support changing an icon with a object that you pass to that function (instead of a url only). In the end I also added a showTooltip parameter there to make sure that you can control will it appear or no on first execution....

Hope it helps - please tell me if something does not work, because i did not test changes in any editor (did that only in EE edit window ;))

cheers,
wilq32

// jQuery GPS - http://www.birdwingfx.com/jQuery_gps/index.html

(function($) {
    
    $.GoogleMapObjectDefaults = {        
        zoomLevel: 10,
        center: '37 103rd Ave. N.E. Bellevue, WA   98004',
        start: '#start',
        end: '#end',
        directions: 'directions',
        submit: '#getdirections',
        showTooltip: true,
        tooltip: 'false',
        image: false
    };

    function GoogleMapObject(elementId, options) {
        /* private variables */
        this._inited = false;
        this._map = null;
        this._geocoder = null;
        
        /* Public properties */
        this.ElementId = elementId;
        this.Settings = $.extend({}, $.GoogleMapObjectDefaults, options || '');
    }

    $.extend(GoogleMapObject.prototype, {
        init: function() {
            if (!this._inited) {
                if (GBrowserIsCompatible()) {
                    this._map = new GMap2(document.getElementById(this.ElementId));
                    this._map.addControl(new GSmallMapControl());
                    this._geocoder = new GClientGeocoder();
                }
                
                this._inited = true;
            }
        },
        load: function() {
            //ensure existence
            this.init();
            
            if (this._geocoder) {
                //"this" will be in the wrong context for the callback
                var zoom = this.Settings.zoomLevel;
                var center = this.Settings.center;
                var map = this._map;
                
                if (this.Settings.tooltip != 'false') {
                    var customtooltip = true;
                    var tooltipinfo = this.Settings.tooltip;
                }
                
                if (this.Settings.image != false) {
                    var customimage = true;
                }
                
                this._geocoder.getLatLng(center, function(point) {
                    if (!point) { alert(center + " not found"); }
                    else {
                        //set center on the map
                        map.setCenter(point, zoom);
                        
                        if (customimage == true) {
                            //add the marker
                            var customicon = this.Settings.image;
                            var marker = new GMarker(point, { icon: customicon });
                            map.addOverlay(marker);
                        } else {
                            var marker = new GMarker(point);
                            map.addOverlay(marker);
                        }
                        
                        if(this.Settings.showTooltip== true) {
                            marker.openInfoWindowHtml(tooltipinfo);
                        }
                    }
                });
            }
            
            
            //make this available to the click element
            $.data($(this.Settings.submit)[0], 'inst', this);
            
            $(this.Settings.submit).click(function(e) {
                e.preventDefault();
                var obj = $.data(this, 'inst');
                var outputto = obj.Settings.directions;
                var from = $(obj.Settings.start).val();
                var to = $(obj.Settings.end).val();
                map.clearOverlays();
                var gdir = new GDirections(map, document.getElementById(outputto));
                gdir.load("from: " + from + " to: " + to);
                
                //open the google window
                //window.open("http://maps.google.com/maps?saddr=" + from + "&daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
            });
            
            return this;
        }
    });

    $.extend($.fn, {
        googleMap: function(options) {
            // check if a map was already created
            var mapInst = $.data(this[0], 'googleMap');
            if (mapInst) {
                return mapInst;
            }
            
            //create a new map instance
            mapInst = new GoogleMapObject($(this).attr('id'), options);
            $.data(this[0], 'googleMap', mapInst);
            return mapInst;
        }
    });
})(jQuery);



// Google Map Custom Marker Maker 2009
// Please include the following credit in your code

// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php

var myIcon = new GIcon();
myIcon.image = 'markers/image.png';
myIcon.shadow = 'markers/shadow.png';
myIcon.iconSize = new GSize(27,50);
myIcon.shadowSize = new GSize(52,50);
myIcon.iconAnchor = new GPoint(27,50);
myIcon.infoWindowAnchor = new GPoint(14,0);
myIcon.printImage = 'markers/printImage.gif';
myIcon.mozPrintImage = 'markers/mozPrintImage.gif';
myIcon.printShadow = 'markers/printShadow.gif';
myIcon.transparent = 'markers/transparent.png';
myIcon.imageMap = [14,0,15,1,15,2,24,3,24,4,25,5,25,6,24,7,23,8,22,9,21,10,20,11,19,12,18,13,17,14,16,15,16,16,16,17,17,18,17,19,17,20,17,21,17,22,18,23,18,24,18,25,18,26,17,27,17,28,17,29,17,30,17,31,17,32,17,33,17,34,17,35,17,36,16,37,16,38,16,39,16,40,15,41,15,42,14,43,13,44,13,45,11,46,10,47,10,48,9,48,9,47,9,46,10,45,10,44,10,43,9,42,9,41,9,40,8,39,8,38,8,37,7,36,7,35,8,34,7,33,7,32,7,31,7,30,7,29,8,28,8,27,8,26,8,25,9,24,9,23,10,22,10,21,10,20,10,19,10,18,10,17,11,16,11,15,10,14,9,13,8,12,7,11,6,10,4,9,1,8,2,7,2,6,2,5,11,4,11,3,12,2,12,1,13,0];






// javascript call
// BEGIN Google Map script ------------------------------------------------------------------>
$(document).ready(function() {
        $("#google-map").googleMap({
                        zoomLevel: 15,                      
                        image: myIcon ,
                        center: '37 103rd Ave. N.E. Bellevue, WA   98004',
                        showTooltip: false,
                        tooltip: '<strong>Massage Center of Bellevue</strong><br />37 103rd Ave. N.E., Suite A<br />Bellevue, WA  98004<br /><br /><strong>Office:</strong> (425) 451-1171<br /><strong>Fax:</strong> (425) 451-1232<br /><br /><strong>Hours:</strong><br />Monday-Friday: 8:00AM - 8:00PM<br />Saturday: 10:00AM - 6:00PM'    
        }).load();
});
// END Google Map script -------------------------------------------------------------------->

Open in new window

Jules Webb

ASKER

Hi wilq32, thanks for your assistance:-)

I didn't know the script was buggy, but yes if I can get it to work I need to use it. Learning javascript is a needed skill and on my list, but I just haven't had the time to do it yet.

What I don't understand is where the custom marker code fits into the rest of the code. Can you tell me how/where to integrate it?

Thanks for your patience!
Jules

Pawel Witkowski

So integrating into code - if you would follow my changes you would see that the "myIcon" object that you've created as a custom object I passing to the $("#google-map").googleMap function. I also need to do some modifications inside the googleMap function to support this. By default the googleMap script supports only changing a image for a marker and a size so this is why I dont like this solution... - yes it's quite easy to use, but you cant do too much more as you already noticed :)

Jules Webb

ASKER

I thought the "var myIcon" code needed to be placed somewhere before: })(jQuery);

If I update my javascript call and the gps.jquery.js file with the code you updated (leaving the "var myIcon" code at the bottom of gps.jquery.js, the page renders with the map and the get direction form works, but there is no icon on the map. I double checked the mapping to the icons and it is correct.

I'm not sure what it is that I'm misunderstanding, but I appreciate your patience:-)

Jules

Pawel Witkowski

Are you sure that you have a folder named markers with all files inside there ? (My first guess) If yes.... can you please give me a some temporary link that I could look at so I can find what is wrong ? :) Anyway as I said I did all changes in Experts Exchange textbox (I couldnt test it as I dont have whole code) so it might contains some stupid error( like typo or something) ;)

Wilq32

Jules Webb

ASKER

http://www.massagecenters.webbdemo.com/contact

The markers are located at: http://www.massagecenters.webbdemo.com/assets/jquery/markers/
I took the index page out so you could see the file list.

Thanks for taking a look:-)
Jules

Pawel Witkowski

Ok change those lines:

55-57
if (this.Settings.image != false) {
var customimage = true;
}

change them to:

var customimage=this.Settings.image;

and line 67:

var customicon = this.Settings.image;

change it to:

var customicon = customimage;

This should work :)

Jules Webb

ASKER

I did as you asked and the default image shows up, with no info window/tool tip. Could you take another look?

Thanks!
Jules

Pawel Witkowski

Does not appear at all (even on click) or just on first screen? I did a showTooltip boolean parameter to show it by default or not... can you try to set it to true and then see how it works ?

thanks,

wilq32

Jules Webb

ASKER

See code below for comments
~Jules

// showTooltip was already set to "true" -- I did try changing tooltip from false to true but it didn't make any difference.
$.GoogleMapObjectDefaults = {        
        zoomLevel: 10,
        center: '37 103rd Ave. N.E. Bellevue, WA   98004',
        start: '#start',
        end: '#end',
        directions: 'directions',
        submit: '#getdirections',
        showTooltip: true,
        tooltip: 'false',
        image: false
    };


// the one error I got when the page rendered was:
// this.Settings is undefined - gps.jquery.js (line 98)
if(this.Settings.showTooltip== true) {

Open in new window

Pawel Witkowski

Shame on me ;) Here are solution, hopefully everything will be fine this time :) cheers,

find those lines of code 45-48

if (this._geocoder) {
//"this" will be in the wrong context for the callback
var zoom = this.Settings.zoomLevel;
var center = this.Settings.center;
var map = this._map;

and add at end:

var showTooltip = this.Settings.showTooltip;

Then change line 75:

if(this.Settings.showTooltip== true) {

to:

if(showTooltip== true) {

Jules Webb

ASKER

I don't get the error anymore, but I still don't see the tooltip window and the map icon is Google's default.
I pasted the code below in case it might be easier for you to go through.

Thanks for hanging in with me:-)
Jules

/*
//////////////////////////////////////////////////////////////////////////////////
///////Copyright © 2009 Bird Wing Productions, http://www.birdwingfx.com//////////
//////////////////////////////////////////////////////////////////////////////////

/////////////////////////////////////////////////////////////////////

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with this program.  If not, see <http://www.gnu.org/licenses/>.

/////////////////////////////////////////////////////////////////////
*/


// jQuery GPS - http://www.birdwingfx.com/jQuery_gps/index.html
// modified with help of experts-exchange.com - http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_25353701.html
// Wanted to add custom marker code created with Google Map Custom Marker Maker and have ability to open and close tooltip window with mouse click
// Expert who did the work: wilq32 - personal blog: http://wilq32.blogspot.com/

(function($) {
    
    $.GoogleMapObjectDefaults = {        
        zoomLevel: 10,
        center: '37 103rd Ave. N.E. Bellevue, WA   98004',
        start: '#start',
        end: '#end',
        directions: 'directions',
        submit: '#getdirections',
        showTooltip: true,
        tooltip: 'false',
        image: false
    };

    function GoogleMapObject(elementId, options) {
        /* private variables */
        this._inited = false;
        this._map = null;
        this._geocoder = null;
        
        /* Public properties */
        this.ElementId = elementId;
        this.Settings = $.extend({}, $.GoogleMapObjectDefaults, options || '');
    }

    $.extend(GoogleMapObject.prototype, {
        init: function() {
            if (!this._inited) {
                if (GBrowserIsCompatible()) {
                    this._map = new GMap2(document.getElementById(this.ElementId));
                    this._map.addControl(new GSmallMapControl());
                    this._geocoder = new GClientGeocoder();
                }
                
                this._inited = true;
            }
        },
        load: function() {
            //ensure existence
            this.init();
            
            if (this._geocoder) {
                //"this" will be in the wrong context for the callback
                var zoom = this.Settings.zoomLevel;
                var center = this.Settings.center;
                var map = this._map;
				var showTooltip = this.Settings.showTooltip;
                
                if (this.Settings.tooltip != 'false') {
                    var customtooltip = true;
                    var tooltipinfo = this.Settings.tooltip;
                }
                
               var customimage=this.Settings.image;
                
                this._geocoder.getLatLng(center, function(point) {
                    if (!point) { alert(center + " not found"); }
                    else {
                        //set center on the map
                        map.setCenter(point, zoom);
                        
                        if (customimage == true) {
                            //add the marker
                            var customicon = customimage;
                            var marker = new GMarker(point, { icon: customicon });
                            map.addOverlay(marker);
                        } else {
                            var marker = new GMarker(point);
                            map.addOverlay(marker);
                        }
                        
                        if(showTooltip== true) {
                            marker.openInfoWindowHtml(tooltipinfo);
                        }
                    }
                });
            }
            
            
            //make this available to the click element
            $.data($(this.Settings.submit)[0], 'inst', this);
            
            $(this.Settings.submit).click(function(e) {
                e.preventDefault();
                var obj = $.data(this, 'inst');
                var outputto = obj.Settings.directions;
                var from = $(obj.Settings.start).val();
                var to = $(obj.Settings.end).val();
                map.clearOverlays();
                var gdir = new GDirections(map, document.getElementById(outputto));
                gdir.load("from: " + from + " to: " + to);
                
                //open the google window
                //window.open("http://maps.google.com/maps?saddr=" + from + "&daddr=" + to, "GoogleWin", "menubar=1,resizable=1,scrollbars=1,width=750,height=500,left=10,top=10");
            });
            
            return this;
        }
    });

    $.extend($.fn, {
        googleMap: function(options) {
            // check if a map was already created
            var mapInst = $.data(this[0], 'googleMap');

            if (mapInst) {
                return mapInst;
            }
            
            //create a new map instance
            mapInst = new GoogleMapObject($(this).attr('id'), options);
            $.data(this[0], 'googleMap', mapInst);
            return mapInst;
        }
    });
})(jQuery);



// Google Map Custom Marker Maker 2009
// Please include the following credit in your code

// Sample custom marker code created with Google Map Custom Marker Maker
// http://www.powerhut.co.uk/googlemaps/custom_markers.php

var myIcon = new GIcon();
myIcon.image = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/image.png';
myIcon.shadow = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/shadow.png';
myIcon.iconSize = new GSize(27,50);
myIcon.shadowSize = new GSize(52,50);
myIcon.iconAnchor = new GPoint(27,50);
myIcon.infoWindowAnchor = new GPoint(14,0);
myIcon.printImage = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/printImage.gif';
myIcon.mozPrintImage = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/mozPrintImage.gif';
myIcon.printShadow = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/printShadow.gif';
myIcon.transparent = 'http://www.massagecenters.webbdemo.com/assets/jquery/markers/transparent.png';
myIcon.imageMap = [14,0,15,1,15,2,24,3,24,4,25,5,25,6,24,7,23,8,22,9,21,10,20,11,19,12,18,13,17,14,16,15,16,16,16,17,17,18,17,19,17,20,17,21,17,22,18,23,18,24,18,25,18,26,17,27,17,28,17,29,17,30,17,31,17,32,17,33,17,34,17,35,17,36,16,37,16,38,16,39,16,40,15,41,15,42,14,43,13,44,13,45,11,46,10,47,10,48,9,48,9,47,9,46,10,45,10,44,10,43,9,42,9,41,9,40,8,39,8,38,8,37,7,36,7,35,8,34,7,33,7,32,7,31,7,30,7,29,8,28,8,27,8,26,8,25,9,24,9,23,10,22,10,21,10,20,10,19,10,18,10,17,11,16,11,15,10,14,9,13,8,12,7,11,6,10,4,9,1,8,2,7,2,6,2,5,11,4,11,3,12,2,12,1,13,0];

Open in new window

Pawel Witkowski

does current version on http://www.massagecenters.webbdemo.com/contact ?? If not can you deploy it there ? :)

Jules Webb

ASKER

Yes the current version is on the site.

Pawel Witkowski

line 91:

if (customimage == true) {

change to:

if (customimage) {

And line:

if (this.Settings.tooltip != 'false') {

Change to:

if (this.Settings.tooltip) {

Hope this time it will be ok :)

Jules Webb

ASKER

the custom image (and shadow) are now presenting:-) But I still don't don't see the tooltip window. Can you still help me?

Thank you Thank you!

Jules:-)

Pawel Witkowski

After lines 75-77 add this:

GEvent.addListener(marker,"click", function() {
marker.openInfoWindowHtml(tooltipinfo);
});

Ehhh that code really missing alot of features ;)

ASKER CERTIFIED SOLUTION

Pawel Witkowski

membership

This solution is only available to members.

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

Start Free Trial

Jules Webb

ASKER

YippppEEEEE we're there!

I ended up with a undefined function again using if(this.Settings.showTooltip== true) so I went back to if(showTooltip== true) and all is well. I know it's not perfect code, but the page looks and functions the way my client wants it to, AND I am thrilled that you stuck with me ---I literally couldn't have done it without you, thank you so much.

Cheers! ~Jules

Jules Webb

ASKER

Hi, it's me again:)

I'm sorry to bug you about this, but I could really use your help. I'm close to going live and was testing all the pages when I discovered that the get directions form associated with the map no longer works. I had thought I tested this thoroughly before closing this ticket, but evidently not well enough. I opened a new ticket which you can find here: https://www.experts-exchange.com/questions/25914474/Problems-with-get-directions-using-google-map-api.html

I would really appreciate your help. ~Jules