title: Javascript and Jquery: Adding markers for Google Maps when clicking a button
body: <p>I'm trying to create a button that will add a marker to an existing google maps that is displayed.</p>
  
  <pre><code>function initialize()
  {
      geocoder = new google.maps.Geocoder();
      codeAddress();
  }
  
  
  
  function codeAddress()
  {
      var image_icon = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
      var address = document.getElementById("type_location").value;
  
      geocoder.geocode( { 'address': address}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
  
              var mapOptions = {
              zoom: 11,
              center: results[0].geometry.location,
              mapTypeId: google.maps.MapTypeId.ROADMAP
              }
  
          map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
  
              var marker = new google.maps.Marker({
                  map: map,
                  position: results[0].geometry.location,
                  icon: image_icon
              });
  
          }           
  
      });
  
  }
  </code></pre>
  
  <p>I'm fairly new and I was hoping someone can help me.</p>
  
  <p>If I have something like this to display my maps:</p>
  
  <pre><code>$(document).ready(function() {  
  
  var coord = $(".address").attr("data-coordinates"); //this displays lat,lng (example: 32.000,-118.000)
  
  var geocoder;
  var map;    
  initialize();
  $(".add_marker").click(function(){
  
      // this is where I should add a marker?
  });
  
  });
  </code></pre>