title: Google Maps popup on text-box click?
body: <p>I have some code for google maps autofilling a text box with Latitude and Longitude when you click on the map.</p>
  
  <p>Now I would like to know if there's a way you can have the map appear in a popup? I searched for "google map" popup frame and things along the same line but I could not find anything.</p>
  
  <p>For instance: Let's assume there is a textbox with id <strong>"Location"</strong>. Once you click on the textbox, a google map popup will appear where you can click and the coordinates will be entered automatically into "Location" (already have this part of the code). If you click anywhere on the screen behind the popup, the google map popup must disappear. </p>
  
  <p>What I had in mind was the google map is hidden; and once there is an <strong>"onclick"</strong> event for the textbox, it will show the popup and the user can choose the location.</p>
  
  <p>I will add the code. </p>
  
  <p><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>            var map;
              var marker = null;
  
              function initialize() {
  
                  var mapOptions = {
                      zoom: 5,
                      disableDefaultUI: false,
                      center: new google.maps.LatLng(21.268899719967695, 39.2266845703125),
                      mapTypeId: google.maps.MapTypeId.ROADMAP
                  };
  
                  map = new google.maps.Map(document.getElementById('map'), mapOptions);
  
                  
                  google.maps.event.addListener(map, 'click', function(event) {
                
                      $("#Coordinate1").val(event.latLng.lat() + ", " + event.latLng.lng());
                      $("#Coordinate1").select();
  
                  
                      if (marker) { marker.setMap(null); }
  
             
                       marker = new google.maps.Marker({ position: event.latLng, map: map});
  
                  });
  
              }  
  
              google.maps.event.addDomListener(window, 'load', initialize);
              
       </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#map {
  width:350px; 
  height:200px;
  }
  #Coordinate1{
  text-align:center;
  border:1px #ccc solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="map"&gt;&lt;/div&gt;
  &lt;input type="text" id="Coordinate1" value="Latitude, Longitude"&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thank you. </p>