How To Hide The InfoWindow In An iFrame Embedded Google Map

February 12th, 2013 - Posted by Steve Marks to (X)HTML / CSS, Javascript / jQuery, Web Development.

When wanting to show a location on a simple Google Map within a website there are few options that you have in order to do this. One of the easiest and quickest methods is to use an iFrame. Let’s look at how we can get the code for the iFrame:

1) Navigate to http://maps.google.com.

2) Enter the location that you wish to display.

Enter the location

3) By clicking the ‘Link’ icon you’ll be presented with the code to put into your HTML.

Get the HTML

In full this reads as follows:

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Birmingham,+UK&amp;aq=0&amp;oq=Birmingh&amp;sll=37.0625,-95.677068&amp;sspn=57.118084,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Birmingham,+West+Midlands,+United+Kingdom&amp;t=m&amp;z=11&amp;ll=52.486243,-1.890401&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Birmingham,+UK&amp;aq=0&amp;oq=Birmingh&amp;sll=37.0625,-95.677068&amp;sspn=57.118084,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Birmingham,+West+Midlands,+United+Kingdom&amp;t=m&amp;z=11&amp;ll=52.486243,-1.890401" style="color:#0000FF;text-align:left">View Larger Map</a></small>

By putting this HTML into our webpage it will give us the iFrame below:

Hiding The InfoWindow By Default

In the iFrame above can you see how the InfoWindow (ie. the white bubble / popup) is shown by default? What if we don’t want it to be visible when the iFrame first loads? Luckily the fix is simple and can be achieved by amending the ‘src’ attribute of the <iframe> tag.

At the end of the ‘src’ attribute add the following to the URL:

&amp;iwloc=near

In full our iFrame code should now look like the HTML below. I’ve highlighted the additional parameter in red.

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=Birmingham,+UK&amp;aq=0&amp;oq=Birmingh&amp;sll=37.0625,-95.677068&amp;sspn=57.118084,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Birmingham,+West+Midlands,+United+Kingdom&amp;t=m&amp;z=11&amp;ll=52.486243,-1.890401&amp;output=embed&amp;iwloc=near"></iframe><br /><small><a href="https://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=Birmingham,+UK&amp;aq=0&amp;oq=Birmingh&amp;sll=37.0625,-95.677068&amp;sspn=57.118084,135.263672&amp;ie=UTF8&amp;hq=&amp;hnear=Birmingham,+West+Midlands,+United+Kingdom&amp;t=m&amp;z=11&amp;ll=52.486243,-1.890401" style="color:#0000FF;text-align:left">View Larger Map</a></small>

And finally, lets see the new HTML in action:

And there it is. No infowindow showing by default when the page loads. It will still open however when the marker is clicked.

This entry was posted on Tuesday, February 12th, 2013 at 7:32 pm by +Steve Marks and is filed under (X)HTML / CSS, Javascript / jQuery, Web Development. You can follow any responses to this entry through the RSS 2.0 feed.
Comments...

Fear not, we won't publish this

Comments (0)

No comments have been left yet. Be the first