HTML and CSS RSS HTML and CSS RSS

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
18 Days Ago
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: 795
Reputation: pritaeas is on a distinguished road 
Solved Threads: 129
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Master Poster
 
0
  #2
18 Days Ago
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
17 Days Ago
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: 795
Reputation: pritaeas is on a distinguished road 
Solved Threads: 129
Sponsor
pritaeas's Avatar
pritaeas pritaeas is offline Offline
Master Poster
 
0
  #4
17 Days Ago
•
•
•
•
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



acer adsense advertising amazon analytics android aol api apple apps bing blackberry blogging browser business cellphone chrome cisco cloudcomputing coding congress copyright cuil development doubleclick earnings email engine facebook g1 gdata gmail google googledocs googleearth government hardware hp ibm icahn internet iphone java legal linux malware mapping maps marketing media merger microsoft mobile msn myspace netbooks networking news office onlineads opensource operatingsystem os pagerank palm privacy programming publishing revenue rss saas search searchengine security seo sex smartphones socialnetwork socialnetworking software space spam statistics streetview t-mobile twitter uk verizon video wave web website wikipedia windows wolframalpha xml yahoo yahoo! youtube zoho
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC