How to add Google Maps to my website

[vc_row][vc_column][rt_dropcap_style dropcap_style=”two” dropcap_letter=”I” dropcap_content=”If your business is related to different locations, interactive maps will be a great benefit for your website. It’s especially true for those who deal with tourism, hotel booking, real estate, restaurants, amenities search, travel guides, shops, parking, traffic, etc. Google Maps have plenty of useful options and features, which give users more possibilities and facilitate their work or just help to find your office. But how to make them work for your website?”][vc_custom_heading text=”4 ways to do it” font_container=”tag:h3|font_size:35px|text_align:left” use_theme_fonts=”yes” css=”.vc_custom_1574332581411{margin-top: 30px !important;}”][vc_column_text]There is more than one method to add a map to a web page. Using each of them depends on your skills in coding, intended features and budget limits. So, let’s take a closer look at them.[/vc_column_text][vc_row_inner][vc_column_inner width=”1/12″][rt_dropcap_style dropcap_style=”five” dropcap_letter=”1″ dropcap_content=””][/vc_column_inner][vc_column_inner width=”11/12″][vc_custom_heading text=”Use a plugin” font_container=”tag:h2|font_size:30px|text_align:left” use_theme_fonts=”yes”][vc_column_text]It’s one of the most popular ways to add Google Maps since it doesn’t require much proficiency but provides a lot of possibilities. You just find a plugin with features you need and set it up. Then you adjust it for your website, including adding an API key. You can read here how to create it. To have a better understanding of how to install a plugin for maps embedding, take a look at this.

The biggest benefit of such method is obtaining a range of useful options. For example, WP MAPS PRO plugin helps to import locations quickly, set filters, provide additional information about places and objects, add a number of markers and cluster them, draw figures, change design, adjust maps to different devices, find directions and multiple routes, search objects nearby, track current location, etc. Even if you didn’t intend to use all these features, they may become a source of ideas for upgrading your website.[/vc_column_text][vc_column_text css=”.vc_custom_1574334827114{margin-bottom: 15px !important;}”]Advantages:[/vc_column_text][rt_list_style list_style=”two”]

• Fast – It doesn’t take much time to install a plugin and make settings.
• A range of additional options. Your website will stand out with its unique opportunities for customers. Maps will show more than just a marker for one address.
• It doesn’t require special skills and knowledge. All you need to know is how to edit pages in WP. Everything else is already created.
• Support – Plugin providers usually help their clients with any issues or questions.

[/rt_list_style][/vc_column_inner][/vc_row_inner][vc_row_inner css=”.vc_custom_1574334865166{margin-top: 30px !important;}”][vc_column_inner width=”1/12″][rt_dropcap_style dropcap_style=”five” dropcap_letter=”2″ dropcap_content=””][/vc_column_inner][vc_column_inner width=”11/12″][vc_custom_heading text=”Create the code yourself” font_container=”tag:h2|font_size:30px|text_align:left” use_theme_fonts=”yes”][vc_column_text]This option means to write it from scratch. It won’t be a big problem for those who know programming languages. There various ways to do it, everything depends on your proficiency and imagination. You can create everything you want, any function or feature, there are no limits. To see if this method is worth applying, look at its analysis below.[/vc_column_text][vc_column_text css=”.vc_custom_1574334876472{margin-bottom: 15px !important;}”]Advantages:[/vc_column_text][rt_list_style list_style=”two”]

• Free. You don’t have to pay anyone if you do it yourself.
• Tailored to your needs. You create the code that will meet your goals in the best way.
• No extra or harmful code. Templates are good but may have options you don’t use. Such code is unnecessary, while one of the main rules in programming is the fewer, the better. It’s also a guarantee that there is no malicious code.
• Easy to fix. You know the code, its structure and logic, that’s why you won’t need too much time for investigations.

[/rt_list_style][vc_column_text css=”.vc_custom_1574334885976{margin-bottom: 15px !important;}”]Disadvantages:[/vc_column_text][rt_list_style list_style=”two”]

• Demands certain skills and knowledge. This mission is impossible for those who have never dealt with programming.
• Needs a professional. If you are not good at coding, you’ll have to pay a developer.
• It takes time to create. Though it’s not a difficult task, it’s still more than just copying and pasting the code.

[/rt_list_style][/vc_column_inner][/vc_row_inner][vc_row_inner css=”.vc_custom_1574334895029{margin-top: 30px !important;}”][vc_column_inner width=”1/12″][rt_dropcap_style dropcap_style=”five” dropcap_letter=”3″ dropcap_content=””][/vc_column_inner][vc_column_inner width=”11/12″][vc_custom_heading text=”Screenshot” font_container=”tag:h2|font_size:30px|text_align:left” use_theme_fonts=”yes”][vc_column_text]Some users opt for it to avoid all that routine with code, API keys and so on. You just find the location in Google Maps, take a picture of your screen, edit it, and then upload to your website as an image. It’s a simple solution, but it’s still a picture, not an interactive map. To find out, if it’s the right option for you, look at its positive and negative sides.[/vc_column_text][vc_column_text css=”.vc_custom_1574334909036{margin-bottom: 15px !important;}”]Advantages:[/vc_column_text][rt_list_style list_style=”two”]

• Easy. You don’t need any extra knowledge or skills to do it.
• Fast. It takes up to 20 minutes for a beginner.
• Free. Since you do it yourself, you don’t have to pay.

[/rt_list_style][vc_column_text css=”.vc_custom_1574334917456{margin-bottom: 15px !important;}”]Disadvantages:[/vc_column_text][rt_list_style list_style=”two”]

• Not cool. Adding a screenshot instead of a map makes your page look not professional.
• No motion. Since it’s an image, it’s impossible to zoom or scroll it, change the mode and get more information about places nearby.

[/rt_list_style][/vc_column_inner][/vc_row_inner][vc_row_inner css=”.vc_custom_1574334926785{margin-top: 30px !important;}”][vc_column_inner width=”1/12″][rt_dropcap_style dropcap_style=”five” dropcap_letter=”4″ dropcap_content=””][/vc_column_inner][vc_column_inner width=”11/12″][vc_custom_heading text=”Embed manually” font_container=”tag:h2|font_size:30px|text_align:left” use_theme_fonts=”yes”][vc_column_text]The simplest way to add a map to your website is to use the Google option. You just open Google Maps and search for a location. Then click ‘Share’ in the sidebar. In the window that appeared, select the ‘Embed a map’ function, choose the size of the map (medium, small, large or custom) and copy the code starting from <iframe. That’s all you have to do on the Google Maps website.

The next step is to embed the code you’ve copied. Open the page where you want to do it in the mode of editing (HTML). Then paste the code in the place where the map should be. After publishing or updating you’ll see the result. But it’s not the end.

For the proper work of the map, you may need to get an API key. It helps different services work together. There are different sets of APIs for Maps, Routes and Places, and you may choose as many as you need. So, find a detailed instruction on how to create an API key here or just get started here. After you receive it, add it in maps settings in the admin panel. Now that’s all, enjoy your page.

This way is a good one, but not perfect. Why? Read below.[/vc_column_text][vc_column_text css=”.vc_custom_1574334936447{margin-bottom: 15px !important;}”]Advantages:[/vc_column_text][rt_list_style list_style=”two”]

• It doesn’t require much time and effort. It’s fast, easy and takes up to 1 hour.
• No special knowledge. The only thing you need to know is how to manage your WP site and where to add a map. The code is already generated.
• Free. You don’t have to pay anyone for doing this work.

[/rt_list_style][vc_column_text css=”.vc_custom_1574334944150{margin-bottom: 15px !important;}”]Disadvantages:[/vc_column_text][rt_list_style list_style=”two”]

• Only one location. There will be only one marker on the map since the code was created for one address.
• No extra options. This way is useful if you only need to point a place. It doesn’t provide options for finding the route, the nearest establishments or giving additional information.

[/rt_list_style][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row]