JavaScript Alert!

To use this website and have a full access to all of the features you are required to enable javascript in your browser.
Not doing so may affect website accessibility.

Find out more on how you can enable javascript in your browser or contact us for additional support.

Embedding Google Map without the address bubble

In today's, very short tutorial I'll show you how to remove the bubble with the address from the google maps embedding code.

For the purpose of this specific exercise I will use the location of the Eiffel Tower in Paris.

The code to embed it on the website looks as follow:

<iframe 
	width="425" 
	height="350" 
	frameborder="0" 
	scrolling="no" 
	marginheight="0" 
	marginwidth="0" 
	src="
		http://maps.google.co.uk/maps?
		f=q&
		source=s_q&
		hl=en&
		geocode=&
		q=Eiffel+Tower,+Avenue+Anatole+France,+Paris,+France&
		aq=3&
		oq=ei&
		sll=48.858275,2.294547&
		sspn=0.02383,0.066047&
		vpsrc=0&
		ie=UTF8&
		hq=&
		hnear=La+Tour+Eiffel,+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&
		t=m&
		z=14&
		ll=48.858275,2.294547&
		output=embed&
		iwloc=A
	"
></iframe>
<br />
<small>
	<a href="
		http://maps.google.co.uk/maps?
		f=q&
		source=embed&
		hl=en&
		geocode=&
		q=Eiffel+Tower,+Avenue+Anatole+France,+Paris,+France&
		aq=3&
		oq=ei&
		sll=48.858275,2.294547&
		sspn=0.02383,0.066047&
		vpsrc=0&
		ie=UTF8&
		hq=&
		hnear=La+Tour+Eiffel,+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&
		t=m&
		z=14&
		ll=48.858275,2.294547
	" style="color:#0000FF;text-align:left">
View Larger Map
</a>
</small>

As you can see we are using the iframe to embed the map on our page, and after the iframe we have the link to view the large map, which I'm not very keen on having so I will simply remove it. After removing it my code looks as follow:

<iframe 
	width="425" 
	height="350" 
	frameborder="0" 
	scrolling="no" 
	marginheight="0" 
	marginwidth="0" 
	src="
		http://maps.google.co.uk/maps?
		f=q&
		source=s_q&
		hl=en&
		geocode=&
		q=Eiffel+Tower,+Avenue+Anatole+France,+Paris,+France&
		aq=3&
		oq=ei&
		sll=48.858275,2.294547&
		sspn=0.02383,0.066047&
		vpsrc=0&
		ie=UTF8&
		hq=&
		hnear=La+Tour+Eiffel,+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&
		t=m&
		z=14&
		ll=48.858275,2.294547&
		output=embed&
		iwloc=A
	"
></iframe>

Now, if we plan on changing the dimensions - you can do it using custom option when you generate the embed code, or simply change the iframe attribute values for the width and height. For the purpose of this specific tutorial I'll change the width to 652px and keep the height as default 350px. My code for embedding now looks like this:

<iframe 
	width="652" 
	height="350" 
	frameborder="0" 
	scrolling="no" 
	marginheight="0" 
	marginwidth="0" 
	src="
		http://maps.google.co.uk/maps?
		f=q&
		source=s_q&
		hl=en&
		geocode=&
		q=Eiffel+Tower,+Avenue+Anatole+France,+Paris,+France&
		aq=3&
		oq=ei&
		sll=48.858275,2.294547&
		sspn=0.02383,0.066047&
		vpsrc=0&
		ie=UTF8&
		hq=&
		hnear=La+Tour+Eiffel,+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&
		t=m&
		z=14&
		ll=48.858275,2.294547&
		output=embed&
		iwloc=A
	"
></iframe>

Now it's time to remove the bubble, which, whether you like it or not - will show up eventually unless you do the followng.

In order to remove the bubble form the google map you have to set - or if not present - add the iwloc parameter to the iframe's src string and make sure it is left blank (without any value assigned) like so:

<iframe 
	width="652" 
	height="350" 
	frameborder="0" 
	scrolling="no" 
	marginheight="0" 
	marginwidth="0" 
	src="
		http://maps.google.co.uk/maps?
		f=q&
		source=s_q&
		hl=en&
		geocode=&
		q=Eiffel+Tower,+Avenue+Anatole+France,+Paris,+France&
		aq=3&
		oq=ei&
		sll=48.858275,2.294547&
		sspn=0.02383,0.066047&
		vpsrc=0&
		ie=UTF8&
		hq=&
		hnear=La+Tour+Eiffel,+Avenue+Anatole+France,+75007+Paris,+%C3%8Ele-de-France,+France&
		t=m&
		z=14&
		ll=48.858275,2.294547&
		output=embed&
		iwloc=
	"
></iframe>

Once you've done this - you should see your map the way it is displayed underneath.

Discussion (1 comment)

Hemali on Saturday, 16th February 2013

Thank you. it is useful to me . But I want to know that is it possible to remove the bubble also when I click on "A" icon . Thanking you in advance, if you get idea on how to do so.

Reply