Simple markers

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">


</script>

<div>
  <h3>Zobacz lokalizacjÄ™:</h3>
  <button id="1" style="padding:10px; cursor:pointer;">Siedziba Firmy</button>
  <button id="2" style="padding:10px;cursor:pointer;">Kopalnia Kruszyw</button>
</div>

CSS

/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */

#map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

var map = null
var marker = null;
var myLatLng = {
  lat: 52.302516,
  lng: 16.414546
};

function initMap() {

  map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(myLatLng.lat, myLatLng.lng),
    zoom: 14,
  });

  marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    title: 'Hello World!'
  });
}

function updateMap(lat, lng) {
  myLatLng.lat = lat;
  myLatLng.lng = lng;
  
  marker.setPosition(myLatLng);
  map.panTo({lat:lat,lng:lng});
};


$(document).ready(function() {
  $("#1").on('click', function() {
    updateMap(52.302516, 16.414546);
  });

  $("#2").on('click', function() {
    updateMap(51.706478, 15.274753);
  });
});