944,040 Members | Top Members by Rank

Web Development > Web Design > HTML and CSS > Google Maps Directions in infowindow
Ad:
Permalink
Nov 5th, 2009
0

Google Maps Directions in infowindow

Expand Post »
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
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ib4dogz is offline Offline
3 posts
since Nov 2009
Permalink
Nov 5th, 2009
0
Re: Google Maps Directions in infowindow
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>
Sponsor
Featured Poster
Reputation Points: 556
Solved Threads: 731
Bite my shiny metal ass!
pritaeas is offline Offline
4,194 posts
since Jul 2006
Permalink
Nov 6th, 2009
0

Still having trouble

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.


Click to Expand / Collapse  Quote originally posted by pritaeas ...
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>
Reputation Points: 10
Solved Threads: 0
Newbie Poster
ib4dogz is offline Offline
3 posts
since Nov 2009
Permalink
Nov 6th, 2009
0
Re: Google Maps Directions in infowindow
Click to Expand / Collapse  Quote originally posted by ib4dogz ...
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 ?
Sponsor
Featured Poster
Reputation Points: 556
Solved Threads: 731
Bite my shiny metal ass!
pritaeas is offline Offline
4,194 posts
since Jul 2006
Permalink
Apr 12th, 2010
0
Re: Google Maps Directions in infowindow
how would i change the language to english on the map in this code?
Reputation Points: 10
Solved Threads: 0
Newbie Poster
brenzor is offline Offline
11 posts
since Apr 2010
Permalink
Apr 12th, 2010
1
Re: Google Maps Directions in infowindow
look for a section in the google script code &hl=** where ** is the two letter abbreviation for the language and change it to &hl=en the original page had tulips windmills and sabots
html entities...
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=nl&amp;key=" type="text/javascript"></script>
becomes
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;hl=en&amp;key=" type="text/javascript"></script>
Last edited by almostbob; Apr 12th, 2010 at 8:39 pm.
Reputation Points: 562
Solved Threads: 368
Posting Maven
almostbob is offline Offline
2,970 posts
since Jan 2009
Permalink
Apr 13th, 2010
0
Re: Google Maps Directions in infowindow
Thank you, it worked fine.

Another thing, how would i change this code to make the info window display on the page load?

*Edit - Dont worry, I got it to work using GEvent.trigger(marker,"click");
Last edited by brenzor; Apr 13th, 2010 at 6:21 am.
Reputation Points: 10
Solved Threads: 0
Newbie Poster
brenzor is offline Offline
11 posts
since Apr 2010

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in HTML and CSS Forum Timeline: Print a page in landscape
Next Thread in HTML and CSS Forum Timeline: Adding a shadowed bar at bottom of google map


Tags
google, maps



About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC