Google Maps Directions in infowindow

Reply

•
•
Join Date: Nov 2009
Posts: 3
Reputation: ib4dogz is an unknown quantity at this point 
Solved Threads: 0
ib4dogz ib4dogz is offline Offline
Newbie Poster

Google Maps Directions in infowindow

 
0
  #1
Nov 5th, 2009
Google Maps Directions in infowindow

Take a look at the link below. Click on one of my markers in the map. Inside the info windows I would like to have “Directions: To here - From here” feature in it.

Thanks in advance for your assistance.

http://www.crucialdesign.net/diningguide/test.html
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 873
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 141
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #2
Nov 5th, 2009
Found this, tried it and worked:
http://groups.google.com/group/Googl...2d04b4eb884a3f

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.   <head> 
  4.     <title>Directions to Josh Gamble's</title> 
  5. 	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=nl&amp;key=" type="text/javascript"></script>
  6.  
  7.   </head> 
  8.   <body> 
  9.     <div id="map" style="width: 400px; height: 400px"></div> 
  10.  
  11.     <script type="text/javascript"> 
  12.       var gmarkers = []; 
  13.       var htmls = []; 
  14.       var to_htmls = []; 
  15.       var from_htmls = []; 
  16.       var i=0; 
  17.  
  18.       function tohere(i) { 
  19.         gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
  20.       } 
  21.  
  22.       function fromhere(i) { 
  23.         gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
  24.       } 
  25.  
  26.     // Check to see if this browser can run the Google API 
  27.     if (GBrowserIsCompatible()) { 
  28.  
  29.       // A function to create the marker and set up the event window 
  30.       function createMarker(point,name,html) { 
  31.         var marker = new GMarker(point); 
  32.  
  33.         // The info window version with the "to here" form open 
  34.         to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' + 
  35.            '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' + 
  36.            '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
  37.            '<INPUT value="Get Directions" TYPE="SUBMIT">' + 
  38.            '<input type="hidden" name="daddr" value="' + 
  39.            point.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 
  40.  
  41.         // The info window version with the "to here" form open 
  42.         from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' + 
  43.            '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank"> ' + 
  44.            '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /> <br> ' + 
  45.            '<INPUT value="Get Directions" TYPE="SUBMIT"> ' + 
  46.            '<input type="hidden" name="saddr" value="' + point.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/> '; 
  47.  
  48.         // The inactive version of the direction info 
  49.         html = html + '<br> Directions: <a href="javascript:tohere('+i+')"> To here</a>  - <a href="javascript:fromhere('+i+')"> From here</a> '; 
  50.  
  51.         GEvent.addListener(marker, "click", function() { 
  52.           marker.openInfoWindowHtml(html); 
  53.         }); 
  54.         gmarkers[i] = marker; 
  55.         htmls[i] = html; 
  56.         i++; 
  57.         return marker; 
  58.       } 
  59.  
  60.       // Display the map, with some controls and set the initial location 
  61.       var map = new GMap(document.getElementById("map")); 
  62.       map.addControl(new GLargeMapControl()); 
  63.       map.addControl(new GMapTypeControl()); 
  64.       map.setCenter(new GLatLng(39.214034,-74.694285), 15); 
  65.  
  66.       // Set up a marker with an info window 
  67.       var point = new GLatLng(39.214034,-74.694285); 
  68.       var marker = createMarker(point,'2023 Cedar Ln.','Some stuff to display in the<br> First Info Window') 
  69.       map.addOverlay(marker); 
  70.     } 
  71.     </script>  
  72.   </body>  
  73.   </html>
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
•
•
Join Date: Nov 2009
Posts: 3
Reputation: ib4dogz is an unknown quantity at this point 
Solved Threads: 0
ib4dogz ib4dogz is offline Offline
Newbie Poster

Still having trouble

 
0
  #3
Nov 6th, 2009
Still having some trouble it with, do you think you could take my code and apply what you gave me and make it work? What I tried didn't work.


•
•
•
•
Originally Posted by pritaeas View Post
Found this, tried it and worked:
http://groups.google.com/group/Googl...2d04b4eb884a3f

HTML and CSS Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3.   <head> 
  4.     <title>Directions to Josh Gamble's</title> 
  5. 	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=nl&amp;key=" type="text/javascript"></script>
  6.  
  7.   </head> 
  8.   <body> 
  9.     <div id="map" style="width: 400px; height: 400px"></div> 
  10.  
  11.     <script type="text/javascript"> 
  12.       var gmarkers = []; 
  13.       var htmls = []; 
  14.       var to_htmls = []; 
  15.       var from_htmls = []; 
  16.       var i=0; 
  17.  
  18.       function tohere(i) { 
  19.         gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
  20.       } 
  21.  
  22.       function fromhere(i) { 
  23.         gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
  24.       } 
  25.  
  26.     // Check to see if this browser can run the Google API 
  27.     if (GBrowserIsCompatible()) { 
  28.  
  29.       // A function to create the marker and set up the event window 
  30.       function createMarker(point,name,html) { 
  31.         var marker = new GMarker(point); 
  32.  
  33.         // The info window version with the "to here" form open 
  34.         to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' + 
  35.            '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' + 
  36.            '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
  37.            '<INPUT value="Get Directions" TYPE="SUBMIT">' + 
  38.            '<input type="hidden" name="daddr" value="' + 
  39.            point.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 
  40.  
  41.         // The info window version with the "to here" form open 
  42.         from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' + 
  43.            '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank"> ' + 
  44.            '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /> <br> ' + 
  45.            '<INPUT value="Get Directions" TYPE="SUBMIT"> ' + 
  46.            '<input type="hidden" name="saddr" value="' + point.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/> '; 
  47.  
  48.         // The inactive version of the direction info 
  49.         html = html + '<br> Directions: <a href="javascript:tohere('+i+')"> To here</a>  - <a href="javascript:fromhere('+i+')"> From here</a> '; 
  50.  
  51.         GEvent.addListener(marker, "click", function() { 
  52.           marker.openInfoWindowHtml(html); 
  53.         }); 
  54.         gmarkers[i] = marker; 
  55.         htmls[i] = html; 
  56.         i++; 
  57.         return marker; 
  58.       } 
  59.  
  60.       // Display the map, with some controls and set the initial location 
  61.       var map = new GMap(document.getElementById("map")); 
  62.       map.addControl(new GLargeMapControl()); 
  63.       map.addControl(new GMapTypeControl()); 
  64.       map.setCenter(new GLatLng(39.214034,-74.694285), 15); 
  65.  
  66.       // Set up a marker with an info window 
  67.       var point = new GLatLng(39.214034,-74.694285); 
  68.       var marker = createMarker(point,'2023 Cedar Ln.','Some stuff to display in the<br> First Info Window') 
  69.       map.addOverlay(marker); 
  70.     } 
  71.     </script>  
  72.   </body>  
  73.   </html>
Reply With Quote Quick reply to this message  
•
•
Join Date: Jul 2006
Posts: 873
Reputation: pritaeas will become famous soon enough pritaeas will become famous soon enough 
Solved Threads: 141
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Practically a Posting Shark
 
0
  #4
Nov 6th, 2009
•
•
•
•
Originally Posted by ib4dogz View Post
Still having some trouble it with, do you think you could take my code and apply what you gave me and make it work? What I tried didn't work.
Can you tell me what you tried, and what didn't work ?
"If it is NOT source, it is NOT software."
-- NASA
Reply With Quote Quick reply to this message  
Reply

Tags
•
•
•
•
Tags
google, maps

Quick Reply to Thread
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the HTML and CSS Forum
Thread Tools Search this Thread



Tag cloud for google, maps
acer adsense adult advertising amazon analytics android aol api apple apps ballmer bing blackberry blogger blogging browser business cellphone chrome cisco cloudcomputing code copyright development doubleclick earnings economy email engine environment europe facebook firefox g1 gadgets gdata gmail google googledocs googleearth government hardware hp ibm internet iphone java journalism legal linux mapping maps marketing media microsoft mobile netbook netbooks networking news office opensource pagerank privacy programming publishing revenue rss saas search searchengine security seo serps sex smartphones socialnetwork socialnetworking software statistics t-mobile technologystocks twitter uk verizon video vista wave web website wiki wikipedia windows wolframalpha xml yahoo yahoo! youtube zoho
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC