How to add a Google map to the site

Google maps is a free map application that allows you to find any object in a matter of seconds and lay the shortest route to it. You can use the cards not only in the application itself, but also install them on your website. In this article we will tell you how to do it right.

Content:

• Why do I need a Google map on the site
• Instructions for inserting Google map on the site
  • Tagged Map
  • Route
  • Panorama of the streets
  • Connecting Google Maps to the Site
• Conclusions

Get a free consultation from an expert on your project

Why do I need a Google map on the site

Contact Page Design affects confidence potential customers, so try to fill it as much as possible. 

Just written in text, an address may not tell visitors anything, especially if they are not oriented in the area. Using an interactive map:

• see where the company is located;
• increase or reduce scale;
• pave the route;
• see the number of reviews and company ratings in Google My Business.

If you put it on the site, it will be much more convenient for users to navigate, and the likelihood that they will come to you will increase.

If you have several branches, the Google map will allow you to visually demonstrate where each of them is. And users will not need to look for the nearest department. They will be able to do this right on the site.

 
As you can see, if you connect Google Maps to your site, everyone will benefit - both users are convenient and profitable for you. 

Instructions for inserting Google map on the site

In Google Maps there is the ability to embed on the site:

• a travel card with a mark set on it;
• laid route; 
• image of viewing streets. 

Consider how to get the HTML code for each of these options and add it to the site. 

Tagged Map

It the most common and convenient widget option. To connect it, follow these steps.

1. Go to Google Maps
2. In the search bar, write the address of the company, or find the necessary point on the map and click on it.
   
   
    
3. Click "Share.
   
   
    
4. Go to the "Installation of cards" tab. Here you will see the iframe code of the map and preview how it will look on the site.
5. By clicking on the arrow located to the left of the code, you can adjust the size: small, medium, large or own.
   
   
    
6. Copy the received code.

Important: if you registered in Google My Business, the map installed on the site will be displayed company name, rating stars and number of reviews. If not, then only the marked label.

Route

If you want to show users, how to get to your office or store from a specific point, for example, from the nearest metro station, then:

1. Similarly, place the label where your company is located.
2. Click “Pass Route”.
   
   
    
3. Write the address of the starting point or indicate it on the map.
4. In the upper left corner of the page, click on the icon from 3 horizontal stripes and go to the Menu.
   
   
    
5. In the window that appears, select “Link / Code”.
   
   
    
6. Go to the "Building" section, set the required size and copy the received code.
   
   

Panorama of the streets

If you want embed not just a driving directions, but also panoramic street view, then:

1. Open the required image on Google Maps.
2. Click on 2 vertical points located near the address.
3. From the window that opens, select “Share with friends or get the code”.
   
   
    
4. Select “Building” and copy the code.
   
   

Connecting Google Maps to the Site

Now, to show Google Maps to users, you only have to set iframe in the source code of the site and keep the changes. If necessary, you can adjust the dimensions by changing the value of the width (width) and height (height) attributes. 

To have a card adaptive and changed depending on the size of the screen, indicate the width 100 %. 

If you don’t know how to make changes to the source code of your site, set the task for the programmer add the iframe of Google maps to your selected page.

Conclusions

Adding a map to the Google site is very simple, this application has a clear interface and a simple set of necessary actions. And the benefits of such an innovation will certainly be appreciated by visitors to your resource. 

P.S. Not only its position in search engines, but also sales volumes depend on how convenient the site is. That is why in the know "Search engine" we have identified a separate usability lesson, after which you can look at the site from the outside, improve behavioral factors and conversion. Join the program at and with by the Maps-10-08 promo code a pleasant bonus will await you.