Question

How can I add new marker to the map? I managed to show the map function startGoogleMaps()
but my function (onclick()), does not work.

function startGoogleMaps(){    
    var map = new google.maps.Map(document.getElementById('canvasMap'), {
        zoom: 5,
        center: initCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });            
}

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: (37, -97),
      map: map,
      title:"Hello World!"});
}

Answer 1

Try defining the map object in the same scope as you are binding the click event:

var map = null;

function startGoogleMaps(){    
    map = new google.maps.Map(document.getElementById('canvasMap'), {
        zoom: 5,
        center: initCenter,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });            
}

document.getElementById("testButton").onclick = function(){
    var marker = new google.maps.Marker({
      position: (37, -97),
      map: map,
      title:"Hello World!"});
}

Also note that you need to pass your position as an instance of google.maps.LatLng:

      ...
      position: google.maps.LatLng(37, -97),
      ...