Add Marker to Google Map from Input Field with Geocode and No Page Refresh

Question

I am trying to get help creating some code to do exactly what the title says...

I want a user to

1. Enter an Address into a form input field
2. Have that address be GeoCoded by Google (already have this function together)
3. Add a marker to the map

I have the code to do this, the only issue is there is a page refresh. I need the ability for someone to do this without the page refreshing, as I do not want to store any information about these markers. Ideally, they could add 1 - 5 markers without refreshing...once they leave this page, the information would not be stored.

Any code or help would be greatly appreciated. Thanks, in advance.

Answer 1

To stop the refresh, simply add an onsubmit clause to your form declaration. The following is taken from my own code that I am working with now.

<form id="postcodeEntry" method="post" action="#" onsubmit="' + this.objName + '.calcRoute(\'driving\',this.postcode.value);return false;">

As long as there is no error in the JavaScript function you call from that clause, the return false, will prevent the page from changing and makes the form a direct interaction with the JavaScript on/in the page.

That will work if any submit buttons are used or the enter key submits the form from the text box.