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.
ib4dogz 0 Newbie Poster
pritaeas 2,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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="http://maps.google.com/maps?file=api&v=2&hl=nl&key=" 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> ib4dogz 0 Newbie Poster
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="http://maps.google.com/maps?file=api&v=2&hl=nl&key=" 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,194 ¯\_(ツ)_/¯ Moderator Featured Poster
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
how would i change the language to english on the map in this code?
almostbob 866 Retired: passive income ROCKS
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&v=2&hl=nl&key=" type="text/javascript"></script> becomes <script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=" type="text/javascript"></script>
brenzor 0 Newbie Poster
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");
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.