iframe – creates a frame on a page which contains another webpage, effectively creates a webpage within a webpage
src – contains the URL of the frame to which we are linking in the other webpage, i.e. the frame in Google maps.
width – specifies the width of the iframe in pixels. The larger the pixel figure the more of the screen it takes up, the lower the figure the less of the screen it takes up. You can change this figure to make your map fit to the area of your requirements.
height – specifies the height of the iframe in pixels. The larger the pixel figure the more of the screen it takes up, the lower the figure the less of the screen it takes up. You can change this figure to make your map fit to the area of your requirements.
frameborder =”0″ – states that there is no border to the frame. This element is for website created pre HTML5. The ‘style’ element below replaces ‘frameborder’.
style=”border:0;” – the figure of ‘0’ represents the width in pixels of the border of the iframe. Showing ‘0’ means that the border is zero pixels wide hence no border is shown. You can change this figure to show a border, ie change the 0 to 1 or more.
allowfullscreen=”” – sets the ability to allow the frame to be full screen
aria-hidden=”false” – aids assistive technologies with reading the page. More info can be found online for example at MDN and W3.org
tabindex=”0” – means that you can use the tab key to navigate through the items on the map. More info can be found online at MDN
Some additional elements which could be add to the code:
style=”border:1px solid Silver;max-width 100%;” – this provides a border of 1 pixel width around the whole iframe, ‘solid’ gives a solid border and ‘Silver’ refers to the colour of the border. These attributes can all be changed, eg you may want a border of 2 pixels, dotted, and Black. The ‘max-width 100%’ is useful if you do not have a responsive web page, ie one that adjusts the size and shape of the elements on a page as the screen size changes. Using max-width means the map does not extend beyond the size of the screen.
To add a Google map to a web page is easy. If you would like instructions on how to do this then please click here.
If it helps, I find the information on iframes and borders from w3schools to be useful.