How to insert a Google map on a website in html?

how to insert a google map on a website in html

Google map with the registered office of the company placed on her website it is a great help for customers looking for its seat. Thanks to such a map, customers will not only find out about the location, but also set a route to it in navigation with one click, save the address on their Google account or look at reviews left by other users.

To insert a Google map on your website, you need to generate it. To do this, go to browser version of Google Maps and search for the address of the company or other place whose map we want to implement on the website.

When the panel with information about a given place is on the left side of the screen, enter the menu using the button with the icon of three horizontal lines. There, among many options, one should choose "share or embed a map".

After pressing, we will see a window with two tabs - the first will allow you to share the map with another Internet user via a private message, and the second placing a Google map on the website.

Here you can adjust the size of the future map - we can choose from small, medium, large and also custom sizes, in which you can define the width and height of the map in pixels. Each dimension is displayed to us on an ongoing basis to make the selection easier. After determining what size the map should take, copy the code next to it.

How to insert a Google map on a website step by step

The generated html code should be placed in the code of the page. If the website is based on a content management system, such as WordPress, the new post or page editor will have the option to paste the code. In this way, you can quickly put a map in a new entry or on a subpage. Such a map can also be placed in the widget anywhere on the page.

If the website does not use WordPress or similar solutions, the generated code should be inserted yourself. You should then edit the index.html file yourself (if you want to add a map to the home page) or the file responsible for one of the subpages and create a div element in which the code should be pasted. More advanced in creating websites with additional plugins can also slightly change the appearance of the base map, for example by adding a range (useful for a restaurant offering delivery), adding more than just one marker (when the company has several branches) or color the map so that it looks aesthetically pleasing. matched the colors of the page.

It is worth adding that the maps generated in this way, called by Google "embed", that is "built-in" are free.

However, the use of the Google Maps API from 2018 is payable. According to the current price list, the cost depends on the number of impressions - small sites are not exposed to any fees when they do not exceed the monthly limit of two hundred dollars. The individual amounts can be checked in Google Maps Platform price list, where there are also display limits, if exceeded, Google will charge you. Google Maps API allows you to choose more maps - you can choose dynamic, static maps that cannot be interacted with, advanced embedded maps with additional options extending the standard, free embedded maps.


also check

Add a comment

Your email address will not be published.

oxary logo
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incident ut labore et dolore