Hi
I am busy with a google map, and I have the 'to here' 'from here' directions on my info window, but i have a problem.
When i type in an address for the directions, it links me to the google maps site, but i get a message in the text box saying "undefined, undefined", and it doesnt work.
Why is this?
this is html/css right?
to Ardav
yeah, ::- in as much as the google maps page is usually accessed from a html form, and the most reasonable cause is the OP has leftout or misspelled a required hidden input field
its about as much html as anything else, )
To the OP
post your code
the google maps api,
posted in the googlemaps online reference, is finicky
you may have simply leftout or misspelled a required hidden input field
to Ardav
yeah, ::- in as much as the google maps page is usually accessed from a html form, and the most reasonable cause is the OP has leftout or misspelled a required hidden input field
its about as much html as anything else, )To the OP
post your code
the google maps api,
posted in the googlemaps online reference, is finicky
you may have simply leftout or misspelled a required hidden input field
I was referring to posting his html or css. Perhaps I should have been clearer.
You can see the map that im working on here:
http://www.brendanstein.co.za/premade.htm
If you enter an address for directions it returns the undefined thing i mentioned before and plots random places all over the world.
please post the code,
not a link to the page
Sorry, didnt know that was how its done.
<!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>Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=ABQIAAAAMyZcwcRoti2iwBokJK2JUhT5nO367DrdQO6qCZ9EALYVXxnLzBTf4gcdFPWcYOz7rnFCjoJLvclb3g" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 1000px; height: 425px"></div>
<a href="http://maps.google.co.za/maps?f=q&source=embed&hl=en&geocode=&q=4+chester+drive,+bishopscourt&sll=-33.991125,18.442891&sspn=0.010942,0.01929&ie=UTF8&hq=&hnear=4+Chester+Dr,+Bishopscourt,+Western+Cape&ll=-33.984648,18.447247&spn=0.021707,0.085745&z=16" style="color:#0000FF;text-align:left">View Larger Map</a>
<script type="text/javascript">
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i=0;
function tohere(i) {
gmarkers.openInfoWindowHtml(to_htmls);
}
function fromhere(i) {
gmarkers.openInfoWindowHtml(from_htmls);
}
// 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 = 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 = 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 = marker;
htmls = 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 GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-33.991125, 18.442891), 14);
// Set up a marker with an info window
var point = new GLatLng(-33.991125,18.442891);
var marker = createMarker(point,'4 Chester Drive.','<img src="images/nlogo.gif" align="top"> <br> 4 Chester Drive <br> Bishopscourt 7708 <br> Cape Town <br> South Africa <br>')
map.addOverlay(marker);
GEvent.trigger(marker,"click");
}
</script>
</body>
</html>
bump
google.com US centric
google.co.za Africa centric
latitude longitude only if you are using a geocoder, else they will return undefined
<!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>Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&hl=en&key=ABQIAAAAMyZcwcRoti2iwBokJK2JUhT5nO367DrdQO6qCZ9EALYVXxnLzBTf4gcdFPWcYOz7rnFCjoJLvclb3g" type="text/javascript"></script></head>
<body>
<div id="map" style="width: 1000px; height: 425px"></div>
<a href="http://maps.google.co.za/maps?f=q&source=embed&hl=en&geocode=&q=4+chester+drive+bishopscourt&sll=-33.991125,18.442891&sspn=0.010942,0.01929&ie=UTF8&hq=&hnear=4+Chester+Dr+Bishopscourt+Western+Cape&ll=-33.984648,18.447247&spn=0.021707,0.085745&z=16" style="color:#0000FF;text-align:left">View Larger Map</a>
<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.co.za/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="' + 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="' + 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 GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(-33.991125, 18.442891), 14);
// Set up a marker with an info window
var point = new GLatLng(-33.991125,18.442891);
var marker = createMarker(point,'4 Chester Drive Bishopscourt 7708 Cape Town South Africa','<img src="images/nlogo.gif" align="top"> <br> 4 Chester Drive <br> Bishopscourt 7708 <br> Cape Town <br> South Africa <br>')
map.addOverlay(marker);
GEvent.trigger(marker,"click");
}
</script></body></html>should work
sorry bloke, without the 'bump' I'd have missed your post
if I click on either direction option it gives a broken link page...
Dont worry, i got it to work.
Thanks for all your help and patience!
I also have the same problem
I also have the same problem
Try the same fix
or
post your code for review, thats how it works :'(
Thx in advance for help. Having similar javascript problem w/Google Map: works fine in IE(8) but *not* in Firefox 3.0.10 -- here is html page code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Directions to Madalins Table and Madalin Hotel, Tivoli Hudson Valley New York </title>
<meta name="keywords" content="hotels hudson valley, hudson valley top 10, hotel reviews, hotel tivoli ny, hotels tivoli ny, hotels hudson valley, hotels dutchess county, hotels rhinebeck, hotels red hook, hotels near bard college, best restaurants hudson valley, hudson valley top 10, restaurant reviews, restaurant tivoli ny, restaurants tivoli ny, restaurants hudson valley, restaurants dutchess county, restaurants rhinebeck, restaurants red hook, restaurants near bard college">
<meta name="description" content="The Madalin is at 53 Broadway just off Route 9G in the center of Tivoli NY about 10 minutes north of Red Hook."/>
<link rel="stylesheet" href="madstyle.css" type="text/css"/>
<script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAqKkkxvQ48q68rkcKkLujEBQwEZt0BycmhjyNT3blPnoApEj4gRSuwz0o6rLsrBdxvxQT3ZtZb7Hr2A" type="text/javascript"></script> <!-- nydesignlab server key -->
<script type="text/javascript" src="js/gallery.js" ></script>
</head>
<body>
<div class="container">
<div class="window-rm-l" style="height:820px">
<div class="window-rm-r" style="height:820px">
<div class="window-rm" style="height:820px">
<div class="dot-l"></div><div class="dot-r"></div>
<div class="logo">
<a href="index.html"><img src="images/madlogo.gif" border="0" width="219" alt="MADALIN" class="logo"/></a>
</div>
<div class="nav1a">
<p class="nav"><a href="hotel.html">HOTEL</a> <span class="bullet">•</span> <a href="rooms.html">ROOMS</a> <span class="bullet">•</span> <a href="reviews.html">Reviews</a> <span class="bullet">•</span> <a href="restaurant.html">RESTAURANT</a> <span class="bullet">•</span> <a href="menu.html">MENU</a> <span class="bullet">•</span> <a href="catering.html">CATERING</a></p>
</div>
<div class="copy4">
<br/>
<img src="images/heds/direxhed.gif" border="0" width="179" alt="Directions"/><br/><br/>
<p class="noem">The Madalin is in the center of the Hudson Valley, at 53 Broadway just off Route 9G in the center of Tivoli New York, about 10 minutes north of Red Hook.<p><br/>
<div id="map" style="width: 700px; height: 555px"></div>
<p><br/></p>
<p class="nav"><a href="directions.html"><span class="here">DIRECTIONS</span></a> <span class="bullet">• </span> <a href="reservations.html">RESERVATIONS</a> <span class="bullet">• </span> <a href="reviews.html">REVIEWS</a></p><br/>
</div>
</div> <!-- close window -->
<div class="cater-r">
<div class="cater">
<p class="special"><b><i>new!</i></b> <span style="color:#CDD590">cater your wedding or event with</span> <a class="rev" href="catering.html">the madalin at montgomery place</a></p>
</div> <!-- close cater -->
</div> <!-- close cater-r -->
<div class="textnav2">
<p class="textnav"><img src="images/m2.gif" border="0" width="60" style="margin-left:12px" alt="M" align="right"> <a href="hotel.html">Madalin Hotel</a> & <a href="restaurant.html">Madalin’s Table</a> | <a href="directions.html">53 Broadway, Tivoli NY 12583</a> | <a href="reservations.html">845-757-2100</a> | <a href="mailto:joe@madalinhotel.com?subject=Looking for a reservation or more info" target="_blank">email</a> <br/>
<a href="hotel.html">hotel</a> | <a href="rooms.html">rooms</a> | <a href="rooms.html">rates</a> | <a href="reviews.html">reviews</a> <br/>
<a href="restaurant.html">restaurant hours <b>weds-sun 5-9pm</b></a> | <a href="menu.html">menu</a> | <a href="directions.html">directions</a> | <a href="reservations.html">reservations</a> <br/>
<font color="red">new!</font> <a href="catering.html">the madalin at montgomery place</a></p><br/>
</div> <!-- close textnav -->
</div> <!-- close window-r -->
</div> <!-- close window-l -->
</div> <!-- close container -->
</body>
</html>
<!-- fail nicely if the browser has no Javascript -->
<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>
<script type="text/javascript">
//<![CDATA[
// Check to see if this browser can run the Google API
if (GBrowserIsCompatible()) {
var gmarkers = [];
var htmls = [];
var to_htmls = [];
var from_htmls = [];
var i=0;
// 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 + '<div class=\'map\'>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
'<br>Enter starting address below:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br></div>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="daddr" value="' +
point.y + ',' + point.x + "(" + name + ")" + '"/>';
// The info window version with the "from here" form open
from_htmls[i] = html + '<div class=\'map\'>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
'<br>Enter end address below:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
'<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br></div>' +
'<INPUT value="Get Directions" TYPE="SUBMIT">' +
'<input type="hidden" name="saddr" value="' +
point.y + ',' + point.x + "(" + name + ")" + '"/>';
// The inactive version of the direction info
html = html + '<div class=\'map\'><br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>';
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml('<div style="white-space:nowrap;">'+html+'</div>');
});
gmarkers[i] = marker;
htmls[i] = html;
i++;
return marker;
}
// functions that open the directions forms
function tohere(i) {
gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+ to_htmls[i]+'</div>');
}
function fromhere(i) {
gmarkers[i].openInfoWindowHtml('<div style="white-space:nowrap;">'+ from_htmls[i]+'</div>');
}
// Display the map, with some controls and set the initial location
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.centerAndZoom(new GPoint(-73.909032 , 42.05877), 6);
map.openInfoWindowHtml(map.getCenterLatLng(),"<div class='map'><span class='map2'>Madalin Hotel/Madalin\'s Table</span><br>53 Broadway<br>Tivoli NY 12583"+'<br><br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a></div>')
// Set up three markers with info windows
var point = new GPoint(-73.909032 , 42.05877);
var marker = createMarker(point,'Madalin Hotel','<div class="map">Madalin Hotel/Madalin\'s Table<br>53 Broadway<br>Tivoli NY 12583</div>')
map.addOverlay(marker);
GEvent.trigger(marker,"click");
}
// display a warning if the browser was not compatible
else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
//]]>
</script>
If you have problems you can write me privately
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.