title: How to show google map onclick the the button
body: <p>Here i am using google map API,On page loading time map is working fine but my requirement is when i am clicking the Locate Me button that time map should display i tried lot but i am not able to do,Any one please update my code.Morning on wards i am trying but i am not getting my answer, i am new person of development field
  <div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> function addressinitialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();
            
              console.log('Place Object',place)
              console.log(place.geometry.location.lat());
              console.log(place.geometry.location.lng());
  
              $('#latitude').val(place.geometry.location.lat());
              $('#longitude').val(place.geometry.location.lng());
          });
          }
          google.maps.event.addDomListener(window, 'load', addressinitialize);
  function initialize() {
          var input = document.getElementById('searchTextField');
          var autocomplete = new google.maps.places.Autocomplete(input);
          google.maps.event.addListener(autocomplete, 'place_changed', function () {
              var place = autocomplete.getPlace();
            
              console.log('Place Object',place)
              console.log(place.geometry.location.lat());
              console.log(place.geometry.location.lng());
  
              $('#latitude').val(place.geometry.location.lat());
              $('#longitude').val(place.geometry.location.lng());
          });
          }
          google.maps.event.addDomListener(window, 'load', initialize);
              var lat = $('#latitude').val();
              var lng = $('#longitude').val();
              var map;
              var marker;
              var myLatlng = new google.maps.LatLng(lat,lng);
              var geocoder = new google.maps.Geocoder();
              var infowindow = new google.maps.InfoWindow();
  
              function mapinitialize(){
  
                  var mapOptions = {
                      zoom: 18,
                      center: myLatlng,
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
             
                  map = new google.maps.Map(document.getElementById("myMap"), mapOptions);
                  
                  marker = new google.maps.Marker({
                      map: map,
                      position: myLatlng,
                      draggable: true 
                  });     
                  
                  geocoder.geocode({'latLng': myLatlng }, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                          if (results[0]) {
                              $('#address').val(results[0].formatted_address);
                              $('#latitude').val(marker.getPosition().lat());
                              $('#longitude').val(marker.getPosition().lng());
                              infowindow.setContent(results[0].formatted_address);
                              infowindow.open(map, marker);
                          }
                      }
                  });
  
                                 
                  google.maps.event.addListener(marker, 'dragend', function() {
  
                  geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
                      if (status == google.maps.GeocoderStatus.OK) {
                          if (results[0]) {
                              $('#address').val(results[0].formatted_address);
                              $('#latitude').val(marker.getPosition().lat());
                              $('#longitude').val(marker.getPosition().lng());
                              infowindow.setContent(results[0].formatted_address);
                              infowindow.open(map, marker);
                          }
                      }
                  });
              });
              
              }
              
              google.maps.event.addDomListener(window, 'load', mapinitialize);
  
              function myFunction() {
                  var panPoint = new google.maps.LatLng(document.getElementById("latitude").value, document.getElementById("longitude").value);
                  map.panTo(panPoint);
               }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBwuev6Dj8Xvo7fePYs2YJ8KA84xxBCIUo&amp;libraries=places"&gt;&lt;/script&gt;
  &lt;input type="PickupAddress" class="form-control" name="PickupAddress" placeholder="Sublocality" id="searchTextField" autocomplete="on" runat="server" required="" data-msg-required="Please enter Pick up Address" aria-required="true" &gt; &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&lt;button onclick="myFunction();document.getElementById('map').style.visibility = 'visible'"&gt;Locate Me&lt;/button&gt;
  
  &lt;div class="col-md-8" style="padding-left: 0px;visibility:hidden" id="map"&gt;
  
  &lt;label&gt;Locate your Flat-room-mate on the map:&lt;/label&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  
  &lt;div id="myMap" style="height:400px;width:100%;"&gt;&lt;/div&gt;
      &lt;br/&gt;
          &lt;div class="col-md-12" style="padding-left:0px;"&gt;
             ADDRESS:  &lt;input id="address" name="address"  type="text" style="width:100%;" class="form-control border" /&gt;
              LATITUDE:  &lt;input type="text" name="latitude" id="latitude"&gt; &lt;br&gt;
              LONGITUDE:  &lt;input type="text" name="longitude" id="longitude"&gt;
          &lt;/div&gt;
      &lt;br&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>