title: Change a google map iframe src attribute using javascript on button click event
body: <p>I have a contact page with like 10 different addresses and a single google map iframe in the middle, i want to make the addresses clickable and when u click on a specific adress, the content of the map change and points to the clicked adress.</p>
  
  <p>I'm a jquery newbie and i dont know ho to do this.</p>
  
  <p>For now im stuck with this, but it's not working:</p>
  
  <p>HTML:</p>
  
  <p>This is the map loading by default with id "map".</p>
  
  <pre><code>&lt;iframe id="map" width="650" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?f=q&amp;amp;source=s_q&amp;amp;hl=it&amp;amp;geocode=&amp;amp;q=23,+Quai+des+Bergues&amp;amp;aq=&amp;amp;sll=46.198392,6.142296&amp;amp;sspn=0.084955,0.222988&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Quai+des+Bergues+23,+Grottes+-+Saint-Gervais,+1201+Gen%C3%A8ve,+Svizzera&amp;amp;t=m&amp;amp;z=14&amp;amp;ll=46.206419,6.145108&amp;amp;output=embed&amp;amp;iwloc=near"&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>This is the button with id "changesrc".</p>
  
  <pre><code>&lt;input type="submit" name="changesrc" id="changesrc" value="Another Adress" /&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
          $('#changesrc').click(function() {
          $('#map').attr('src','http://maps.google.it/maps?f=q&amp;amp;source=s_q&amp;amp;hl=it&amp;amp;geocode=&amp;amp;q=roma&amp;amp;aq=&amp;amp;sll=41.811729,12.738513&amp;amp;sspn=2.927223,7.13562&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=Roma,+Lazio&amp;amp;t=m&amp;amp;z=11&amp;amp;iwloc=A&amp;amp;output=embed');
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Any suggestion? Any help is very much appreciated. thanks!</p>
  
  <hr>
  
  <p>I was able to make it work properly now! i set up the input to look like normal links so now it's all ok, but i have one problem:</p>
  
  <p>When i click to change the map, the new map showing is not "centered" where the pin is, it's moved wrongly (the pin and central location are now in the top left corner).</p>
  
  <p>I think this happens because of the "display: none" that is creating the issue. There's a way to fix that ?</p>
  
  <p>Thanks in advance</p>