Javascript Marker Question (Google Map)

Hi all,
I have a javascript function written for a google maps page that adds a temporary marker to a page when a user clicks on a point. This then calls a form where the user can enter info about the marker for display and is submitted to DB The only problem is I don't know how to alter the javascript so that when a user clicks on a different temporary point it removes the old temporary point. Would anyone have any ideas as to how to alter the  function to make this happen? Here's the current function. It calls the form when a point is clicked on the mark and adds a marker to that point. Here's a link to teh current testing page (http://www.reachateacher.ie/map/subfinderlivederek.php)
Thanks,
D

GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
//map.removeOverlay(overlay);
} else if (point) {
map.addOverlay(new GMarker(point));

output.innerHTML = "<form name=form1 method=post action=subfinder_load_dblivederek.php><table border=0>"+
"<tr><td>Lat:</td><td align=left><input name=new_lat type=text id=new_lat value=" + point.y + "></td><td"+
"rowspan=4><input name=new_marker type=radio value=A checked>Active<br><input name=new_marker type=radio "+
"value=M>Museum<br><input name=new_marker type=radio value=S>Sunk<br><input name=new_marker type=radio value=E>Event</td></tr>"+
"<tr><td>Lon:</td><td align=left><input name=new_lon type=text id=new_lon value=" + point.x + "></td></tr>"+
"<tr><td>Text:</td><td align=left><input name=new_desc type=text id=new_desc size=60></td></tr>"+
"<tr><td>URL:</td><td align=left><input name=new_url type=text id=new_url size=60></td></tr>"+
"<tr></td><td align=left><input type=submit name=Submit value=Submit></td></tr></table></form>";
dereksheahanAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
perhaps

savePoint = null
GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
//map.removeOverlay(overlay);
} else if (point) {
if (savePoint) map.removeOverlay(savePoint);
savePoint = new GMarker(point);
map.addOverlay(savePoint);
}
0
 
dereksheahanAuthor Commented:
Legend! Thanks mplungjan that works! Just one other small question regarding this page if you wouldn't mind. As you can see from the above script, the output.InnerHTML is called and displayed on the screen when a user clicks on a point on the map. I want this form to appear though in a selected div tag on the screen and not just underneath the map as it is now. Where do I put the div tags aorund the javascript/HTML so that I can choose where I want this info to be displayed? I've tried numerous places but it keeps giving me syntax errors.
Thanks,
D
0
 
Curtis ShullFounderCommented:
Why not place the entire form in a layer?

<div id="yourLayer" style="??" width:??px; height:??px; z-index:?">
output.innerHTML = "<form name=form1 method=post action=subfinder_load_dblivederek.php><table border=0>"+
"<tr><td>Lat:</td><td align=left><input name=new_lat type=text id=new_lat value=" + point.y + "></td><td"+
"rowspan=4><input name=new_marker type=radio value=A checked>Active<br><input name=new_marker type=radio "+
"value=M>Museum<br><input name=new_marker type=radio value=S>Sunk<br><input name=new_marker type=radio value=E>Event</td></tr>"+
"<tr><td>Lon:</td><td align=left><input name=new_lon type=text id=new_lon value=" + point.x + "></td></tr>"+
"<tr><td>Text:</td><td align=left><input name=new_desc type=text id=new_desc size=60></td></tr>"+
"<tr><td>URL:</td><td align=left><input name=new_url type=text id=new_url size=60></td></tr>"+
"<tr></td><td align=left><input type=submit name=Submit value=Submit></td></tr></table></form>";
</div>
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
dereksheahanAuthor Commented:
Hi Onyx23.
When I try this it gives me the following error:
Error: invalid XML attribute value
Source File: http://www.reachateacher.ie/map/sfliveaddpt.php
Line: 249, Column: 31
Source Code:
output.innerHTML = "<form name=form1 method=post action=reg1.php><table border=0>"+

I don't think the div tag will work inside the javascipt function like this?
Thanks,
D
0
 
Curtis ShullFounderCommented:
Sure you can - give me the entire page code
0
 
Michel PlungjanIT ExpertCommented:
1. use document.getElementById('output').innerHTML
2. use
document.getElementById('output').style.top='100px'
document.getElementById('output').style.left='100px'
to move it to 100,100
If you want to move it to where the click was, you could use the coordinates from the gMarker function
Michel
PS: view-source:http://www.reachateacher.ie/map/subfinderlivederek.php
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.