Google Maps Directions in infowindow

Question

ib4dogz 0 Newbie Poster

16 Years Ago

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

google user-interface web-design

4 Contributors
6 Replies
966 Views
5 Months Discussion Span
Latest Post 16 Years Ago Latest Post by brenzor

Dani AI

Generated 10 Months Ago

A few clarifications and a short modern pattern to make the “Directions: To here / From here” idea robust today.

The sample posted used the Maps JavaScript API v2. That worked in 2009 but v2 has been retired and is no longer available — any v2 code should be migrated to v3. See Google's deprecations and the v2→v3 upgrade guide for the exact timeline and migration notes. (developers.google.com)

Two practical options now:

Render directions in-page (better UX): use the Maps JavaScript API v3’s DirectionsService + DirectionsRenderer to compute and draw a route and to show step-by-step text in a side panel. (developers.google.com)
Quick external link: build a Maps URL (https://www.google.com/maps/dir/?api=1&destination=...) to open Google Maps with the destination prefilled (no API key needed). This is what I recommend if you only need a simple “open directions” link from an InfoWindow. (developers.google.com)

Localization and small UX tips:

v3 uses the language (and region) parameter when loading the API to control UI language — replace old hl usage when you migrate. (developers.google.com)
Reuse a single InfoWindow for all markers, capture loop variables properly (use let or closures), and either call infoWindow.open(...) to show it programmatically on load or trigger the marker handler — the InfoWindow / marker docs show the safe patterns. (developers.google.com)

Minimal pattern (v3) — create one InfoWindow, set HTML that contains a Maps URL link for “To here”, and optionally wire a button to call DirectionsService to render the route on the map:

// sketch: create one InfoWindow, add marker click, set content with a Maps URL link
const infoWindow = new google.maps.InfoWindow();
marker.addListener('click', () => {
  const url = 'https://www.google.com/maps/dir/?api=1&destination=' + encodeURIComponent(lat + ',' + lng);
  infoWindow.setContent('<div><strong>' + name + '</strong><br><a href="' + url + '" target="_blank">Directions: To here</a></div>');
  infoWindow.open(map, marker);
});

Common pitfalls: leaving v2 script tags in the page, forgetting billing/API-key setup for v3, or binding handlers inside loops without capturing the marker index. Address those and either link out or render directions in-place depending on the UX you want.

All 6 Replies

pritaeas 2,276 Most Valuable Poster

16 Years Ago

Found this, tried it and worked:
http://groups.google.com/group/Google-Maps-API/msg/e42d04b4eb884a3f

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Directions to Josh Gamble's</title> 
	<script src="" type="text/javascript"></script>
    
  </head> 
  <body> 
    <div id="map" style="width: 400px; height: 400px"></div> 

    <script type="text/javascript"> 
      var gmarkers = []; 
      var htmls = []; 
      var to_htmls = []; 
      var from_htmls = []; 
      var i=0; 

      function tohere(i) { 
        gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
      } 

      function fromhere(i) { 
        gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
      } 

    // Check to see if this browser can run the Google API 
    if (GBrowserIsCompatible()) { 

      // A function to create the marker and set up the event window 
      function createMarker(point,name,html) { 
        var marker = new GMarker(point); 

        // The info window version with the "to here" form open 
        to_htmls[i] = html + '<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.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 

        // The info window version with the "to here" form open 
        from_htmls[i] = html + '<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.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 

        // The inactive version of the direction info 
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>'; 

        GEvent.addListener(marker, "click", function() { 
          marker.openInfoWindowHtml(html); 
        }); 
        gmarkers[i] = marker; 
        htmls[i] = html; 
        i++; 
        return marker; 
      } 

      // Display the map, with some controls and set the initial location 
      var map = new GMap(document.getElementById("map")); 
      map.addControl(new GLargeMapControl()); 
      map.addControl(new GMapTypeControl()); 
      map.setCenter(new GLatLng(39.214034,-74.694285), 15); 

      // Set up a marker with an info window 
      var point = new GLatLng(39.214034,-74.694285); 
      var marker = createMarker(point,'2023 Cedar Ln.','Some stuff to display in the<br>First Info Window') 
      map.addOverlay(marker); 
    } 
    </script> 
  </body> 
  </html>

almostbob 866 Retired: passive income ROCKS

16 Years Ago

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="" type="text/javascript"></script> becomes <script src="" type="text/javascript"></script>

Edited 16 Years Ago by almostbob because: n/a

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

ib4dogz 0 Newbie Poster · Answer 1 · 2009-11-06T16:18:47+00:00

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.

Found this, tried it and worked:
http://groups.google.com/group/Google-Maps-API/msg/e42d04b4eb884a3f

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
  <head> 
    <title>Directions to Josh Gamble's</title> 
	<script src="" type="text/javascript"></script>
    
  </head> 
  <body> 
    <div id="map" style="width: 400px; height: 400px"></div> 

    <script type="text/javascript"> 
      var gmarkers = []; 
      var htmls = []; 
      var to_htmls = []; 
      var from_htmls = []; 
      var i=0; 

      function tohere(i) { 
        gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
      } 

      function fromhere(i) { 
        gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
      } 

    // Check to see if this browser can run the Google API 
    if (GBrowserIsCompatible()) { 

      // A function to create the marker and set up the event window 
      function createMarker(point,name,html) { 
        var marker = new GMarker(point); 

        // The info window version with the "to here" form open 
        to_htmls[i] = html + '<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.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 

        // The info window version with the "to here" form open 
        from_htmls[i] = html + '<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.latDegrees + ',' + point.lngDegrees + "(" + name + ")" + '"/>'; 

        // The inactive version of the direction info 
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>'; 

        GEvent.addListener(marker, "click", function() { 
          marker.openInfoWindowHtml(html); 
        }); 
        gmarkers[i] = marker; 
        htmls[i] = html; 
        i++; 
        return marker; 
      } 

      // Display the map, with some controls and set the initial location 
      var map = new GMap(document.getElementById("map")); 
      map.addControl(new GLargeMapControl()); 
      map.addControl(new GMapTypeControl()); 
      map.setCenter(new GLatLng(39.214034,-74.694285), 15); 

      // Set up a marker with an info window 
      var point = new GLatLng(39.214034,-74.694285); 
      var marker = createMarker(point,'2023 Cedar Ln.','Some stuff to display in the<br>First Info Window') 
      map.addOverlay(marker); 
    } 
    </script> 
  </body> 
  </html>

pritaeas 2,276 Most Valuable Poster Moderator Featured Poster · Answer 2 · 2009-11-06T18:17:00+00:00

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 ?

brenzor 0 Newbie Poster · Answer 3 · 2010-04-13T01:13:50+00:00

how would i change the language to english on the map in this code?

brenzor 0 Newbie Poster · Answer 4 · 2010-04-13T15:01:41+00:00

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

Google Maps Directions in infowindow

Dani AI

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers