How to embed Google Map with location marker to your website
Posted on December 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.
A map of your nearby area will get displayed with a search box on the top left corner of your browser.
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.
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.
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
A pop up appears with two links at the top:
- Send a link
- Embed a 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.
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%".
Share on Social Media
- Content is King: What on earth does that mean?
- 8 big web design mistakes that drives away website visitors
- Reasons why your website does not get you any results
- How to display code in a web page [just like in text editors]
- 7 ways that you can make money from your blog
- Step-by-step guide on how to create & setup a Facebook page
- 10 Reasons why your website may need redesigning
- How to create and setup a LinkedIn page for your Company
- How to turn off getting Facebook email notifications
- How to disable/turn off getting twitter email notifications
- Why you should hire an experienced website developer
- Reasons why your website should be SEO optimized
- Different types of digital marketing explained
- 10 Essential web pages that every business website should have
- How to configure custom domain email to use in Gmail
- How to Get More Visitors to Your Website for Free
- Search Engine Optimization(SEO) explanation to a layman
- Why your business need to have a website
- Reasons why your website should have a blog
- Basic Terminologies in Website Design and Development
- Computer Keyboard Shortcuts that you should know
- [Solved] Drag and drop not working in Ubuntu 19.04
- How to embed Google Map with location marker to your website
- The complete HTTP Status response codes reference
- Differences between shared, VPS, dedicated and cloud hosting