CodePen

HTML

            
              <h1>Google Maps Link Generator</h1>
<input type="text" placeholder="Enter the Address Here" class="address">
<button>Submit</button>

<div class="result">
    <a href="" class="map-link">Google Map Link</a>
</div>



  <!-- remove this last bit, just to show output -->

<p>href value = https://maps.google.co.uk/maps?q=<span class="result"></span></p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              input[type="text"] {
  width: 400px;
  height: 50px;
  border: 1px solid #ccc;
  font-size: 20px;
  padding: 0 5px;
}

a.map-link { display: none; }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              (function(){ 
  $('button').on('click', function() {
      
      var $editItem = $(".address");
      var $link = $editItem.val();
      
      var $maplink = $("a.map-link");
    
      var $pluslink = $link.replace(/\s+/g, '+');
      
      $maplink.show();
    
      $maplink.attr("href", 'https://maps.google.co.uk/maps?q=' + $pluslink);
    
     
    
    
      // remove - this is just for showing the href being output
      $("span.result").text($pluslink);
  });
})();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................