title: Google maps api get lat and lng dynamically
body: <p>When I run my code, the map doesn't display. I am working on my localhost. I want to put lat and lng to inputs. Then when I change the lat and lng the inputs will change dynamically. How can I solve this problem? </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://maps.google.com/maps/api/js?sensor=false&amp;.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="googleMap" style="width:500px;height:500px;"&gt;&lt;/div&gt;
  Lat: &lt;input type="text" id="lat"&gt;&lt;br&gt;
  Lng: &lt;input type="text" id="lng"&gt;
  &lt;script type="text/javascript"&gt;
  function initialize() {
      var myLatlng = new google.maps.LatLng(41,28);
      var myOptions = {
        zoom: 15, 
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("googleMap"), myOptions);
      addMarker(myLatlng, 'Default Marker', map);
      map.addListener('click',function(event) {
          addMarker(event.latLng, 'Click Generated Marker', map);
      );
  }}
  function addMarker(latlng,title,map) {
      var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title: title,
              draggable:true
      });
      marker.addListener('drag',function(event) {
          $('#lat').val() = event.latLng.lat();
          $('#lng').val() = event.latLng.lng();
      });
      marker.addListener('dragend',function(event) {
          $('#lat').val() = event.latLng.lat();
          $('#lng').val() = event.latLng.lng();
      });}
  &lt;/script&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>