title: How to dynamically `generate` a google map base on an address ?
body: <h2>Details</h2>
  
  <ul>
  <li>I want to print a map base on <code>any</code> address that are stored in my <code>&lt;span&gt;</code> </li>
  <li>My address is : <code>410 walker street Lowell MA 01851</code></li>
  <li>My <code>&lt;span&gt;</code> is  <code>Address: &lt;span id="address" &gt; 410 walker street Lowell MA 01851 &lt;/span&gt;</code></li>
  <li>I want to use Google Map API for that</li>
  </ul>
  
  <h2>What I have tried</h2>
  
  <pre><code>Address: &lt;span id="address" &gt; 410 walker street Lowell MA 01851 &lt;/span&gt;
  
  &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;
  
  &lt;!-- "Highlight a place or an address" --&gt;
  &lt;iframe 
  
  width="600" height="450" frameborder="0" style="border:0"
  src="
  
  https://www.google.com/maps/embed/v1/place?q=
  
  410+walker+street+Lowell+MA+01851
  
  &amp;key=*****
  
  "&gt;
  
  &lt;/iframe&gt;
  </code></pre>
  
  <h2>Here is my result</h2>
  
  <p><img src="https://i.stack.imgur.com/XJIxG.png" alt="enter image description here"></p>
  
  <p>So far so good, everything is working, and it's work because I input the address manually 
  like this <code>?q = 410+walker+street+Lowell+MA+01851</code></p>
  
  <p>but I don't want the input the address manually. How do I do this dynamically ? I need some suggestions - please. </p>
  
  <h2>My Approach</h2>
  
  <ul>
  <li><p>I was wondering if I can store my address in a variable <code>$address</code></p></li>
  <li><p>$address = "<code>410 walker street Lowell MA 01851</code>";</p></li>
  <li><p>and finally print them back out as "410+walker+street+Lowell+MA+01851" in part of my HTML attribute <code>src=""</code>.</p></li>
  </ul>
  
  <h2>Questions</h2>
  
  <ul>
  <li>I am not sure at all that this approach is the best practice for this.</li>
  <li>Is it possible ? How ? </li>
  <li>Can anyone help shed the light on this ?</li>
  </ul>