title: How to display two text fields into one
body: <p>I have this code of google map with coordinates values</p>
  
  <p>the questions is how we can merge the text field of Lat &amp; Lon into one field only,</p>
  
  <p>so we need one text field only display the coordinated (Lat,Lon)</p>
  
  <p>can any one help</p>
  
  <p>the code is below</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
  
  
  
  
  
  
  &lt;script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
  
  sensor=false"&gt;&lt;/script&gt; 
  
     &lt;br /&gt;
      Copy this number and past it in GPS field
     &lt;br /&gt;
  
  
  
   &lt;br /&gt;
  
  &lt;input id="divLon" type="text" /&gt; 
  &lt;input id="divLat" type="text" /&gt;
  
          &lt;br /&gt;
  
          &lt;br /&gt;
  
       &lt;div id="map_canvas" style="width: 600px; height: 600px;"&gt;&lt;/div&gt;
          &lt;script type="text/javascript"&gt;
  
              var marker;
  
  
  
  
  
   function initialize() {
                  var lat;`enter code here`
                  var lon;
                  navigator.geolocation.getCurrentPosition(function (location) {
                      lat = location.coords.latitude;
                      lon = location.coords.longitude;
  
                      var city = new google.maps.LatLng(lat, lon);
                      var mapOptions = {
                          zoom: 15,
                          center: city,
  mapTypeId: 
  google.maps.MapTypeId.HYBRID
                      };
                      var map = new google.maps.Map(document.getElementById
  
  ("map_canvas"), mapOptions);
  
                      var image = "icon.png";
                      marker = new google.maps.Marker({
                                      position: city,
                                      map: map,
                                      draggable: true,
                                      icon: image
                      });
  
                      google.maps.event.addListener(marker, 'position_changed', 
  
  function (event) {
                          update();
                      });
  
                     update();
                  }, function (positionError) {
                      alert("getCurrentPosition failed: " + positionError.message);
                  }, { enableHighAccuracy: true });
              };
  
              google.maps.event.addDomListener(window, "load", initialize);
  
              function update() {
  
                  var lonlan = marker.getPosition();
                  var divLon = document.getElementById ("divLon");
                  var divLat = document.getElementById ("divLat");
  
                  divLat.value = lonlan.lat ();                                       
  
          divLon.value = lonlan.lng ();
              }
  
  
  
  
  
      &lt;/script&gt;
      &lt;script async defer
          src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfpx62iYkjhpz0J-
  
  vu4Zz96vtWE2TFzQs&amp;signed_in=true&amp;callback=initMap"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>