title: Adding markers to google map on button click
body: <p>I have following code where I am using a Google map with overlay images. I have hard-coded one marker on this map. In my page, I need to add markers on 'Add Marker' button click getting Latitude and Longitude inputs. How can I push markers on to the map on this button click.</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://code.jquery.com/jquery-3.1.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-map/3.0-rc1/jquery.ui.map.js"&gt;&lt;/script&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js"&gt;&lt;/script&gt;  
  &lt;style&gt;
    #map {
      height: 90%;
    }
    html, body {
      height: 90%;
      margin: 0;
      padding: 0;
    }
  &lt;/style&gt;
  &lt;script src="https://maps.googleapis.com/maps/api/js?key= xxx"&gt;&lt;/script&gt;
  &lt;script&gt;
    var overlay;
  
    MapOverlay.prototype = new google.maps.OverlayView();
  
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: {lat: 9.877717, lng: 79.694586},
        mapTypeId: 'satellite'
      });
  
      var myLatLng = {lat: 9.8, lng: 79.9};
      //adding a marker
      var marker = new google.maps.Marker({
        position: myLatLng,
        map: map
      });
  
      var bounds = new google.maps.LatLngBounds(
          new google.maps.LatLng(9.71088992, 79.6855391),
          new google.maps.LatLng(9.9351849, 80.048088));
  
      var srcImage = 'file:///home/../abc.jpg';
  
      overlay = new MapOverlay(bounds, srcImage, map);
    }
  
    function MapOverlay(bounds, image, map) {
  
      ........
    }
  
    MapOverlay.prototype.onAdd = function() {
  
      .............
    };
  
  
    google.maps.event.addDomListener(window, 'load', initMap);
  &lt;/script&gt;
   &lt;/head&gt;
   &lt;body&gt;
  Latitude : &lt;input type="text" placeholder="Latitude" id="lat"/&gt;
  Longitude : &lt;input type="text" placeholder="Longitude" id="lng"/&gt;
  &lt;button type="button" id="addMarkerBtnId"&gt;Add Marker&lt;/button&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;div id="map"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>
  </p>