load google map in iframe, add google map to website, iframe example, how to use iframe, How to embed maps in a website using iframe

How to embed maps in a website using iframe

There is always a way in which website developers or owners of a website which is a business display website do require to display the actual location on the map which is mostly referred to as a pin of a location.

The pin of a location is the actual URL that one share with another such that they can locate their current location or business location without sharing a lot of directions using landmarks

When a business or location exists in the Google maps platform, Google allows the user to export the dimensions of the actual location by providing a link that you can either share with the respective users or embed it into your website.

The map location in a website improves trust when customers want to transact with you since they will definitely know of a location they can visit to collect the items they are purchasing.

An Iframe or basically an inline frame is a rectangular portion that is used to hold and display portions of HTML elements in another HTML document.

An iframe allows one to insert contents from another source to the current HTML document.

Note that it is not all websites can be allowed to be used as iframes since there is a provision to block URLs from being used as iframes on another website.

To use an iframe in a website, we use the iframe tag as shown

<iframe src="" width="" height="">

</iframe>

The iframe tag initializes the inline frame and tells the webpage that an inline frame will be loaded in this section

  • The src attribute is the one that holds the URL or link of the document that will be loaded as the inline frame
  • The width sets how long the inline frame will be
  • The height defines the height which the inline frame will cover

Other attributes that are added to the inline frame includes,

  • name which can be used to replace the iframe contents from another source
  • title which is used to hold the title of the iframe
  • the style attribute is used to add any other additional feature to define the appearance of the iframe, for example, color, border size, and so on

How to embed maps in a website using iframe

To ensure that the map is embedded or loaded in a website using the iframe,

  • first, the location or the business location must be visible from google maps
  • next, you will need to visit google maps by keying in the URL http://maps.google.com/
  • in the search box on the top left of the google maps interface, you will need to type in the location (for this illustration, we will use Stamford bridge as the location)
  • if the location is present on the map, it will be marked with a red map icon

How to embed maps in a website using iframes

Having identified the location on the map, we will need now to generate the iframe to use in the website

  • click share

How to embed maps in a website using iframes

  • a modal will pop up as shown in the image above
  • click embed in a map from the modal that is displayed and an iframe will be generated

You can change the size of the iframe by using the drop-down options provided in the left side (you can leave it as it is for the default size which is medium)

  • click copy HTML on the right side of the iframe and paste it in your webpage

the iframe will be as below

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2484.7193105100687!2d-0.193145184455826!3d51.481666320405694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760f864b976f3d%3A0x48aa38781ea565f8!2sStamford%20Bridge!5e0!3m2!1sen!2s!4v1636613660237!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

One you paste it in your body section in the webpage, the full example of the webpage will be as follows

<!DOCTYPE html>

<html>

<head>

<title>Load Iframe in a website</title>

</head>

<body>

 

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2484.7193105100687!2d-0.193145184455826!3d51.481666320405694!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48760f864b976f3d%3A0x48aa38781ea565f8!2sStamford%20Bridge!5e0!3m2!1sen!2s!4v1636613660237!5m2!1sen!2s" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

 

</body>

</html>

  • Run your code and observe the result which will generate a map that can be clicked, zoomed in, and out.

With that, you will have learned how to embed maps in a website using iframe