Jump to content

Div problem with google map

dbhynds

By dbhynds
in JavaScript

Recommended Posts

dbhynds Newbie

dbhynds

Posted
Posted

I'm trying to create a Google map that generates directions. When a user searches for directions, it displays the route, and puts the directions below. Everything works great except for when a user makes a subsequent search. the map displays the route fine, but instead of creating a new set of directions, it just adds the second set to the bottom of the first. (For example: try searching "Gridley" then "Glyn Ellen" and scroll down).See it at www.anderson.edu/welcome/map/google2.htmlI'm a little new and inexperienced with javascript, so I can't figure out why it adds the new directions to the bottom of the first or how to fix it. The code dumps the directions into a div called "route". The function "setDirections" is where I'm having the trouble, so that's where you need to look. Here's the code:

	//<![CDATA[	var map;	var directionsPanel; 	var gdir;	var auloc = new GMarker(new GLatLng(40.111196, -85.665904)); var reasons=[];	  reasons[G_GEO_SUCCESS] = "Success";	  reasons[G_GEO_MISSING_ADDRESS] = "No Address: Please enter an address.";	  reasons[G_GEO_UNKNOWN_ADDRESS] = "Unknown Address:  No corresponding geographic location could be found for the specified address. Please ensure the address was accurately entered";	  reasons[G_GEO_UNAVAILABLE_ADDRESS]= "Unavailable Address: This address cannot be displayed due to legal or contractual reasons.";	  reasons[G_GEO_BAD_KEY] = "Bad Key: The API key is either invalid or does not match the domain for which it was given.";	  reasons[G_GEO_TOO_MANY_QUERIES] = "Too Many Queries: The daily geocoding quota for this site has been exceeded.";	  reasons[G_GEO_SERVER_ERROR] = "Server error: The geocoding request could not be successfully processed.";	  reasons[G_GEO_BAD_REQUEST] = "A directions request could not be successfully parsed.";	  reasons[G_GEO_MISSING_QUERY] = "No query was specified in the input.";	  reasons[G_GEO_UNKNOWN_DIRECTIONS] = "The GDirections object could not compute directions between the points.";	function initialize() {	  if (GBrowserIsCompatible()) {	   map = new GMap2(document.getElementById("map"));		var center = new GLatLng(40.08647729380881, -85.65284729003906);		map.setCenter(center, 12);		map.addControl(new GSmallMapControl());		map.addControl(new GMapTypeControl());GEvent.addListener(auloc, "click",  function() { auloc.openInfoWindowHtml("<b>Anderson University</b><br />1100 East 5th Street<br />Anderson, IN 46012<br />1-800-428-6414"); }); map.addOverlay(auloc);GEvent.addListener(gdir, "error", function() {	var code = gdir.getStatus().code;	var reason="Code "+code;	if (reasons[code]) {	  reason = reasons[code]	  } 	  alert("Failed to obtain directions, "+reason);   });	   }	}function setDirections(fromAddress, fromstate) {	  map = new GMap2(document.getElementById("map"));	  directionsPanel = document.getElementById("route");	  gdir = new GDirections(map, directionsPanel);	  gdir.load(fromAddress + ", " + fromstate + " to 1100 East 5th Street, Anderson, IN");	  auloc.hide();	}	//]]>

And here's the HTML: <body onload="initialize()" onunload="GUnload()"> <div id="map" style="width: 570px; height: 428px"></div><p align="center"><form action="#" onsubmit="setDirections(this.from.value, this.state.value); return false">City: <input type="text" size="35" id="fromAddress" name="from" /><select id="state" name="state"><option value="AL">AL</option><option value="AK">AK</option><option value="AZ">AZ</option><option value="AR">AR</option><option value="CA">CA</option><option value="CO">CO</option><option value="CT">CT</option><option value="DE">DE</option><option value="FL">FL</option><option value="GA">GA</option><option value="HI">HI</option><option value="ID">ID</option><option value="IL">IL</option><option value="IN" selected>IN</option><option value="IA">IA</option><option value="KS">KS</option><option value="KY">KY</option><option value="LA">LA</option><option value="ME">ME</option><option value="MD">MD</option><option value="MA">MA</option><option value="MI">MI</option><option value="MN">MN</option><option value="MS">MS</option><option value="MO">MO</option><option value="MT">MT</option><option value="NE">NE</option><option value="NV">NV</option><option value="NH">NH</option><option value="NJ">NJ</option><option value="NM">NM</option><option value="NY">NY</option><option value="NC">NC</option><option value="ND">ND</option><option value="OH">OH</option><option value="OK">OK</option><option value="OR">OR</option><option value="PA">PA</option><option value="RI">RI</option><option value="SC">SC</option><option value="SD">SD</option><option value="TN">TN</option><option value="TX">TX</option><option value="UT">UT</option><option value="VT">VT</option><option value="VA">VA</option><option value="WA">WA</option><option value="WV">WV</option><option value="WI">WI</option><option value="WY">WY</option></select> <input name="submit" type="submit" value="Get Directions" /></form></p><div id="route" style="border; 1px solid black;"></div> </body>Any help would be greatly appreciated! Remember, I'm a bit of a newbie, so you might have to use dumb-person language.

Link to comment
Share on other sites
dbhynds Newbie

dbhynds

Posted
  • Author
Posted
I'm getting script errors when the page loads, one of the Google scripts is having an error somewhere.
Odd... it works fine for me. I had a friend test it, too. Anyone else having the same problem?If not... anyone help me on the original question?
Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

I'm still having issues with the page, but you can clear out the div first if you want to.

function setDirections(fromAddress, fromstate) {	  map = new GMap2(document.getElementById("map"));	  directionsPanel = document.getElementById("route");	  for (var i = directionsPanel.childNodes.length - 1; i >= 0; i--)		directionsPanel.removeChild(directionsPanel.childNodes[i]);	  gdir = new GDirections(map, directionsPanel);	  gdir.load(fromAddress + ", " + fromstate + " to 1100 East 5th Street, Anderson, IN");	  auloc.hide();}

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...