Place marker on google maps api with html button

Question

(I\'m learning on my own, I know my code is messy, inb4 sorry) I have a table with some data and a button, I want that when I press the button a marker appears on the map in the

Answer 1

Is this what you're looking for?

The addmarker function, being called by the button agregar, was inside the myMap function. I have separated them.

I have also simplified your map initialization and the marker "setter", assigning new objects directly to properties.

Fiddle:

https://jsfiddle.net/cbao9wLg/62/

$('#button').click(function() {
  addmarker('-22.3157017', '-49.0660877', 'Infowindow test');
});
$('#button2').click(function() {
  addmarker('-23.5936152', '-46.5856465', 'Infowindow test2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button" style="width:80px;height:30px;cursor:pointer;">
  Click
</button>
<button id="button2" style="width:80px;height:30px;cursor:pointer;">
  Click2
</button>
<div id="map" style="width:555px;height:500px"></div>
<script>
  function myMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: new google.maps.LatLng(-33.4545832, -70.6541925),
      zoom: 11
    });
  }

  function addmarker(lat, lon, info) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lon),
      info: new google.maps.InfoWindow({
        content: info
      }),
      map: map
    });

    google.maps.event.addListener(marker, 'click', function() {
      marker.info.open(map, marker);
    });

    map.panTo(marker.getPosition());
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDL5dMHBCV7crlostybmkuGBAXjOP3yawQ&callback=myMap"></script>