Only Allow One Marker At A Time To Be Added

I wonder whether someone could possibly please help me with what I hope is a simple fix.

I am using the code below, to allow a user to input an address on an input form, click a button which geocodes the address, returning the Lat/Lng co-ordinates, placing a marker on the map. If the user then add details of another address and clicks the button, the code geocodes that address and places another marker on the map, in other words there are now two markers on the map.

Could someone perhaps tell me how I would go about making changes to my code that would only allow only one marker to be editable at any one time until the user clicks a 'save' button. i.e. If the user types in the address as London, it is geocoded as before, but when they change the address to say Edinburgh that marker moves to the new location, hence one marker on the map until they click the save button which will then clear the fields on my form.

function Geocode() {

    // This is defining the global variables
    var map, geocoder, myMarker;

    window.onload = function() {

    //This is creating the map with the desired options
    var myOptions = {
    zoom: 5,
    center: new google.maps.LatLng(55.378051,-3.435973),
    mapTypeId: google.maps.MapTypeId.TERRAIN,
    mapTypeControl: true,
    mapTypeControlOptions: {
        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
        position: google.maps.ControlPosition.TOP_LEFT
    },
    navigationControl: true,
    navigationControlOptions: {
        style: google.maps.NavigationControlStyle.ZOOM_PAN,
        position: google.maps.ControlPosition.TOP_RIGHT
    },
    scaleControl: true,
    scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_LEFT
    }
    };

    map = new google.maps.Map(document.getElementById('map'), myOptions);

    // This is making the link with the 'Search For Location' HTML form
    var form = document.getElementById('SearchForLocationForm');

    // This is catching the forms submit event
    form.onsubmit = function() {

    // This is getting the Address from the HTML forms 'Address' text box
    var address = document.getElementById('Address').value;

    // This is making the Geocoder call
    getCoordinates(address);

    // This is preventing the form from doing a page submit
    return false;
    }
    }

    // This creates the function that will return the coordinates for the address
    function getCoordinates(address) {

    // This checks to see if there is already a geocoded object. If not, it cre开发者_如何学运维ates one
    if(!geocoder) {
    geocoder = new google.maps.Geocoder();
    }

    // This is creating a GeocoderRequest object
    var geocoderRequest = {
    address: address
    }

    // This is making the Geocode request
    geocoder.geocode(geocoderRequest, function(results, status) {

    // This checks to see if the Status is 'OK 'before proceeding
    if (status == google.maps.GeocoderStatus.OK) {

    // This centres the map on the returned location
    map.setCenter(results[0].geometry.location);

    // This creates a new marker and adds it to the map
    var myMarker = new google.maps.Marker({
        position: results[0].geometry.location,
        draggable:true
    });

    //This fills out the 'Latitude' and 'Longitude' text boxes on the HTML form
    document.getElementById('Latitude').value=  results[0].geometry.location.lat();
    document.getElementById('Longitude').value=  results[0].geometry.location.lng();

    //This allows the marker to be draggable and tells the 'Latitude' and 'Longitude' text boxes on the HTML form to update with the new co-ordinates as the marker is dragged
    google.maps.event.addListener(     
    myMarker,     
    'dragend',     
    function() {         
    document.getElementById('Latitude').value = myMarker.position.lat();         
    document.getElementById('Longitude').value = myMarker.position.lng(); 

    var point = myMarker.getPosition();
    map.panTo(point);   
    } 
    ); 
    }
    } 
    )
    }
    })();

A simple way to do this would be to store the currently editable marker in a global variable. Whenever the user presses save, you would then make sure the user could not edit it anymore.

A good thing to remember is that if you ever want to edit any of those markers again in the future you would need to store them somehow. An Array is the normal way to do this. So, in other words. What you would do is:

User enters location. Geocode returns a result. Make a new marker with that location and store it in a global variable. If the user changes the location, you change the location on that marker. If the user presses save, you clear the variable. When the user wants to make a new marker you simply assign the global variable to a new instance of a marker.

And remember to save the "saved" markers in an array if ever you want to access them again. If you don't do that, the markers will still exist and be shown on the map, but you have no way of accessing them.

Hope that helped.