Course lectures : 1 of 1

Embedding Google Map without the address bubble

14th January 2012

google mapsembed google mapsgoogle map embed

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>

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.

COMMENTS

If you'd like to include code example please wrap your code within <pre><code> tags. See example here


<pre>
<code>
function fullName(firstName, lastName)
{
    return firstName + ' ' + lastName;
}
</code>
</pre>