Question

I created two custom buttons on Google Maps to create markers
When I click on button 1 it create a marker with one icon, and when I click on button 2 it create a button with another icon, but when I click first in a button, create the marker then in another button, and create the another marker, it create the 2 buttons, one in front of the other. I dont know why, this is my code:

This is my example

var map, ren, ser;

var marker;
var infowindow;
var doMark = false ;
var doMark2 = false;



//Função de Inicio

function goma()
{
    if (doMark == 0)
    {
        doNothing();
    }
    var mapDiv = document.getElementById('mappy');

    var mapOptions = {
    zoom: 12, 

    center: new google.maps.LatLng(-23.563594, -46.654239),
    mapTypeId : google.maps.MapTypeId.ROADMAP
    }

    map = new google.maps.Map( mapDiv, mapOptions );


    var teste = document.createElement('DIV');
    teste.style.padding = '1px';
    teste.style.border = '1px solid #000';
    teste.style.backgroundColor = 'white';
    teste.style.cursor = 'pointer';
    teste.innerHTML = '<img src="http://i47.tinypic.com/2dlp2fc.jpg" border="0" alt="Image and video hosting by TinyPic">';
    teste.index = 1;


    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(teste);

        var rest = document.createElement('DIV2');
    rest.style.padding = '1px';
    rest.style.border = '1px solid #000';
    rest.style.backgroundColor = 'white';
    rest.style.cursor = 'pointer';
    rest.innerHTML = '<img src="http://i45.tinypic.com/2yua8ns.png" border="0">';
    rest.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(rest);

    google.maps.event.addDomListener(teste, 'click', function() 
    {
        doMark = true;
        doMark2 = false;
        markNow();
    });
    google.maps.event.addDomListener(rest, 'click', function() 
    {

        doMark = false;
        doMark2 = true;
        markNow2();
    });

}   

var string = JSON.stringify(data2)

function downloadUrl(url, callback) 
{
    var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    request.open('POST',url);
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    request.send('command=save&marker='+string)
    request.onreadystatechange = function()
    { 
        if(request.readyState==4) 
        {
            if(request.responseText.indexOf('bien')+1)
            {
                alert('Mapa Atualizado !');
            }
            else
            {
                alert(request.responseText);
            }
        }
    }
}

function markNow()
{
    //doMark2 = true;
    if (doMark == true)
    {

        google.maps.event.addListener(map, "click", function(event) 
        {

            marker = new google.maps.Marker({ position: event.latLng, map: map});
            if (doMark ==1)
            google.maps.event.addListener(marker, "click", function() 
            {
                infowindow.open(map, marker);
            });
        });
        var html = "<table>" +
           "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
           "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
           "<tr><td>Tipo:</td> <td><select id='type'>" +
           "<option value='oficina' SELECTED>oficina</option>" +
           "<option value='restaurante'>restaurante</option>" +
           "</select> </td></tr>" +
           "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
    }
}

function markNow2()
{

    if (doMark2 == true)
    {

        google.maps.event.addListener(map, "click", function(event) 
        {
            doMark = 0
            marker = new google.maps.Marker({ position: event.latLng, map: map, icon: 'http://i45.tinypic.com/2yua8ns.png' });
            google.maps.event.addListener(marker, "click", function() 
            {
                infowindow.open(map, marker);
            });
        });
        var html = "<table>" +
           "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
           "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
           "<tr><td>Tipo:</td> <td><select id='type'>" +
           "<option value='oficina' SELECTED>restaurante</option>" +
           "<option value='restaurante'>oficina</option>" +
           "</select> </td></tr>" +
           "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/></td></tr>";

infowindow = new google.maps.InfoWindow({content: html});
    }

}

Answer 1

You have 2 functions markNow() and markNow2() which together create one marker on top of the other.
In markNow() the marker should be chosen within the function.The rest of the code is equivalent in both functions.

Delete markNow2() and change markNow() to

function markNow(){   

    google.maps.event.addListener(map, "click", function(event) 
    {
        if (doMark == true){
        alert("Marker 1 Chosen");
        marker = new google.maps.Marker({ position: event.latLng, map: map});
        }
        if (doMark2 == true){
        alert("Marker 2 Chosen");
        marker = new google.maps.Marker({ position: event.latLng, map: map, icon: 'http://i45.tinypic.com/2yua8ns.png' });
        }
        //if (doMark ==1)
        google.maps.event.addListener(marker, "click", function() 
        {
            infowindow.open(map, marker);
        }
        );
    }
    );
    var html = "<table>" +
       "<tr><td>Nome:</td> <td><input type='text' id='name'/> </td> </tr>" +
       "<tr><td>Endereco:</td> <td><input type='text' id='address'/></td> </tr>" +
       "<tr><td>Tipo:</td> <td><select id='type'>" +
       "<option value='oficina' SELECTED>oficina</option>" +
       "<option value='restaurante'>restaurante</option>" +
       "</select> </td></tr>" +
       "<tr><td></td><td><input type='button' value='Salvar' onclick='saveData()'/>     </td></tr>";

  infowindow = new google.maps.InfoWindow({content: html});


}

This allows only 1 marker.

In function goma()
Change last from markNow2(); to markNow();