How to embed Google Map with location marker to your website

Posted in Web design and development  on Dec 12, 2018

One advantage among the many others of having a website for your business is to give directions to where your business is located. This can be achieved through displaying the physical address on the site or adding a map. Google Map is the easiest option to display a map on the web page. In this article I will take through the process of how you can add a Google map with a map marker to your location on your website.

Visit www.google.com/maps

A map of your nearby area will get displayed with a search box on the top left corner of your browser.

google map

Search business location

Type in the name of the place location you want to search eg. the name or address of the building, street name etc. Google will do asynchronous as you type and display a list of places which you can click on just below the search box. If no choices appear just make sure you type in your location correctly and hit search icon or press the enter button. Your location will get displayed on the map marker.

embedding google map

You can zoom the map in or out to get a clear view by of the location using the plus (+) and minus (-) icons at the bottom right of the browser window.

zooming google map

You can also drag the map in any direction within the browser to get a good view by left clicking and moving the mouse. Once you are satisfied with how your location is displayed on the map (with a map marker), its now the time to get the Iframe for embedding to the site.

Click the “Share” icon

share google map

A pop up appears with two links at the top:

  • Send a link
  • Embed a map

share google map

Click on the “Embed a map” link.

You will get 4 choices in which you can select on how you want the map displayed on your website:
   a). Small – This has a width of 400px by 300px height
   b). Medium – Medium covers 600px width by 450px
   c). Large – Large covers 800px width by 600px height
   d). Custom size – This option gives you the privilege of keying in your desired dimensions in pixels on your on and you can be able to preview it by clicking “Preview actual size” link.

adding google map to website

Once you have chose your option, click the “Copy HTML” link. You have your code in form of html iframe copied and you can display it anywhere within the HTML code that you want to display the map. For the purpose of website responsivity, you may want the map to have a dynamic width depending on the screen size of the device used to access the web page. You do that by replacing the width attribute value in your Iframe with a percentage(%). Eg, change width="800" to something like width="100%".