JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<div id="map"></div><input type="button" id="findButton" value="find me"/>

CSS

html,body,#map { margin:0;padding:0;height: 100% }
      #findButton{
      font-size:1.4em;margin:2px;
      font-weight:bold;
      }

JavaScript

function initialize() {
    
	    var myLatlng=new google.maps.LatLng(51.843143, -2.643555),
          map = new google.maps.Map(document.getElementById('map'), { 
		              zoom: 12, 
		              center: myLatlng}),
          marker = new google.maps.Marker({
                  position: myLatlng,
                  map: map,
                  title:"We are here!"
                  });
                  
      //use the button as control when you want to
      map.controls[google.maps.ControlPosition.TOP_CENTER].push($("#findButton")[0]);
		  
      function successCallback(position) { 
        var latlng    = new google.maps.LatLng( position.coords.latitude, 
                                                position.coords.longitude),
            
            myOptions = {
              zoom: 15,
              center: latlng,
              mapTypeControl: false,
              navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
              mapTypeId: google.maps.MapTypeId.ROADMAP
            },
            bounds=new google.maps.LatLngBounds(latlng);
        
        bounds.extend(marker.getPosition());
        
        //only set new options for the map
        //instead of creating a new instance
        map.setOptions(myOptions);
        
        //when you want to
        //set the viewport  of the map so that it diplays both locations
        map.fitBounds(bounds);
        
        //marker for the user-location when you want to
        new google.maps.Marker({
                  position: latlng,
                  map: map,
                  title:"You are here!",
                  icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png'
                  });
      }
      
      function errorCallback() {
        alert("I'm afraid your browser does not support geolocation.");
      }
       
		  function findMe(){
		    //hide the button, no need for further clicks
        $(this).hide();
        
       ...