• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 433
  • Last Modified:

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>";
0
dereksheahan
Asked:
dereksheahan
  • 2
  • 2
  • 2
1 Solution
 
Michel PlungjanIT 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
 
Onyx23Commented:
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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
 
Onyx23Commented:
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now