JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAD1cGxDL7LACcFYri-tvfEF56P5ZApRt0"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<div class="btn-group">
    <button type="button" data-lat="10.1239535" data-lon="-68.0186285" data-zoom="15" class="btn btn-primary geo">Ver Valencia</button>
    <button type="button" data-lat="10.4786877" data-lon="-66.8411884" data-zoom="15" class="btn btn-danger geo">Ver Caracas</button>
    <button type="button" data-lat="10.6341414" data-lon="-71.6680988" data-zoom="15" class="btn btn-info geo">Ver Maracaibo</button>
</div>

<div id="googlemaps" style="widht:100%; height:350px;" ></div>

JavaScript

$(function(){
    //iniciaMap();

      $(".geo").click(function(){
          var lat = $(this).attr('data-lat'), lon = $(this).attr('data-lon'), zoo = $(this).attr('data-zoom');
          var latitud = lat;
          var longitud = lon;

          var myLatlng = new google.maps.LatLng(latitud,longitud);
          var myOptions = {
              zoom: 10,
              center: myLatlng,
              mapTypeId: google.maps.MapTypeId.ROADMAP
          }

          map = new google.maps.Map($("#googlemaps").get(0), myOptions);

          infoWindow = new google.maps.InfoWindow();

          var marker = new google.maps.Marker({
              position: myLatlng,
              draggable: false,
              map: map,
              title:"Arrastre para actualizar"
          });
      })
    })