Jump to content

Div problem with google map

Recommended Posts

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 post
Share on other sites
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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Create New...