CODEWITHSUNDEEP
jqueryiframemapssrc
pwnjack
pwnjack

Reputation: 1096

Change a google map iframe src attribute using javascript on button click event

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.

I'm a jquery newbie and i dont know ho to do this.

For now im stuck with this, but it's not working:

HTML:

This is the map loading by default with id "map".

<iframe id="map" width="650" height="300" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=23,+Quai+des+Bergues&amp;aq=&amp;sll=46.198392,6.142296&amp;sspn=0.084955,0.222988&amp;ie=UTF8&amp;hq=&amp;hnear=Quai+des+Bergues+23,+Grottes+-+Saint-Gervais,+1201+Gen%C3%A8ve,+Svizzera&amp;t=m&amp;z=14&amp;ll=46.206419,6.145108&amp;output=embed&amp;iwloc=near"></iframe>

This is the button with id "changesrc".

<input type="submit" name="changesrc" id="changesrc" value="Another Adress" />

Javascript:

<script type="text/javascript">
        $('#changesrc').click(function() {
        $('#map').attr('src','http://maps.google.it/maps?f=q&amp;source=s_q&amp;hl=it&amp;geocode=&amp;q=roma&amp;aq=&amp;sll=41.811729,12.738513&amp;sspn=2.927223,7.13562&amp;ie=UTF8&amp;hq=&amp;hnear=Roma,+Lazio&amp;t=m&amp;z=11&amp;iwloc=A&amp;output=embed');
        });
    </script>

Any suggestion? Any help is very much appreciated. thanks!

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:

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).

I think this happens because of the "display: none" that is creating the issue. There's a way to fix that ?

Thanks in advance

Upvotes: 2

Views: 6856

Answers (1)

Gogowitsch
Gogowitsch

Reputation: 1222

Does the #changesrc exist more than once? Then you should use the class attribute instead of id because unlike the latter, the former is allowed to exist more than once.

You cannot access the src attribute because of your browser's security rules (cross domain access). This applies to all JavaScript, not only to jQuery and Google Maps.

But you can wrap all maps in a <div> tag and show it on demand. Of course all maps (except for possibly your default map) should be hidden at first via CSS.

You can see it all in action here: http://jsfiddle.net/FDKHee/pYX6Y/7
(CSS is to the upper right)

Upvotes: 1

Related Questions