Learn How to Effectively Embed Your Google Map

Whenever you have your store’s website, or you provide any services, e.g. car repairs, you should always have a special tab on your site where the potential customer may find contact information. Not everyone knows where your place is located so you should have an embed map in the tab mentioned before. The majority of people embed Google Maps, as its the most reliable choice for them because of its popularity.

How to embed Google Maps into HTML

To embed Google Maps in HTML, of course, you need to start at opening the Google Maps.

google-maps

It is pretty easy to embed Google Maps, especially when you need to paste it into the HTML code. At first, find the coordinates which you are interested in and then in a menu on the left you should notice a feature “Share or embed a map.”

share-or-embed-Google-Maps

Now you have two possibilities, either to send a link to your map which is generated in special goo.gl URL or to embed a map with the iframe code.

send-google-maps-link

We are interested in the second option(embed a map). You can notice there also a preview how your embed Google map will be looking on your website so you still can make some changes before you copy the iframe code.

embed-map-preview

You can change the size of the embed Google Map to fit it into your website. Google offers three different sizes, but there is also a possibility to create a custom one. You can insert your own values and then preview it to check how it would look like. Really comfortable option because then you don’t have to modify anything when you already paste the embed Google Maps HTML code.

google-maps-sizes

Now, go to the code of the page where you want to embed Google Maps. And now paste Google Maps code whenever you want, but we advise you to do it in the <head> or <body> section of your HTML code.

google-maps-embedd-code

To be honest, it is everything about embedding Google Maps in HTML, so as you can see it is pretty easy to do. Of course, the basic Google Maps doesn’t look the best, but there are many options for customizing it. Remember you can always change the size of the map without generating a new embed code. Just change the “width” and “height” values, and the map will change its size.

google-maps-embed-values

Of course, you can add a marker with a location e.g. of your shop because mostly it is the main aim of the people who embed Google Maps. To embed Google Maps locations in HTML code, go back to Google Maps, enter to coordinates of the place you want to display and then you will notice a marker. On the left side instead of a menu, you will see a few options available with the location. One of them is share, which you need to choose to embed a Google Maps location.

google-maps-location-share
Then you will notice the same windows with the code as it was with the sharing Google Maps without any locations. To help you understand the entire process of embedding Google Maps into HTML we have created a GIF below which will show you everything step-by-step.

google-maps-location-share
If you would like to create your marker and customize its information we advise you to check our Google My Maps tutorial and the article about how to add multiple markers to Google Maps.

Embed Google Maps – WordPress

WordPress is the most popular CMS software on which people have already created millions of websites(more or less professional). We will teach you how to embed a Google Map in WordPress without any third-party plugins. It is a comfortable option because who would like to get another addon to manage..?

WordPress-dashboard

To add Google Maps to WordPress as with the HTML at first you need to go to the Google Maps website, find your place and then click the share button on the menu

share-or-embed-Google-Maps

Choose your size and then copy the iframe code and go back to your WordPress website dashboard. Now, find the page on which you want to display Google Maps and open its text editor.

Wordpress-text-editor
Now, paste the iframe code which you have generated before. Thanks to it a page editor will be able to display your map.

Wordpress-Google-Maps-Code

Now update your page and adding Google Maps to WordPress should be done. Check the results on your website and if it’s not working try to generate an embed code once again. As you see in my case, it works great. Even after pasting the code you still can change its size in the text editor thanks to the width and height values.

google-maps-wordpress-result

Of course, if you prefer more extended Google Maps, there are available various third-party WordPress plugins which might allow you to fast and easy display the map like WP Google Maps.

Google-maps-wordpress-plugins

Remember it is better to customize your Google Maps to make it look unique, a good example is Snazzy WordPress plugin about which you can also read in our other article. Now you should know how to add Google Maps to WordPress. You must always remember that the embed Google Maps in WordPress or other web builders is really important because thanks to it the potential client knows your location.

If you would like to find a more extended map which will allow you to mark your store locations on the map and set their details such as opening hours don’t hesitate to check Nearplace which offers the best designed and easy to use a store locator.

Embed Google Maps – Joomla

Joomla is another really popular CMS software on which you can embed Google Maps. If you run a website on it probably you are acknowledged with the Joomla dashboard so there shouldn’t be any issue with adding the map to your website.

Joomla-dashboard

At first, you need to generate a Google Maps embedding code from their website. Just click on the location and on the left menu you will notice a share button. For more extended information read the first header about adding Google Maps in HTML.

share-or-embed-Google-Maps

Now once you have generated a code copy it and let’s head back to the Joomla admin panel. The first possibility is to go to your templates and choose your default template and insert into the code. It might look hard but if you follow the steps, it’s really easy.

Joomla-templates

Now when you are in your templates tab, you need to click on the name of your current template and it will redirect you to its files. Now, for example, let’s choose the index.php file because it is the main file of our website, but it will work in whatever file you want.

joomla-index

You can find there various components of the website like footer in which we are going to inject embedding code

Joomla-Google-Maps-Template-Preview

As you see it works without any trouble and looks really nice on our website. If you would like to customize your Google Map a little bit more, we advise you to go to our customization tutorial. The more unique map the more people might want to see it, maybe some people don’t really care about it, but it really matters.

Now lets head to another method of embedding Google Maps into Joomla website. You can embed Google Maps iframe in the new module(page) also. Go back to your dashboard and choose the “Modules” tab.

joomla-modules

Create a new module by clicking on a green “New” button.

joomla-new-module

It will redirect you to the module type choice and now you need to find a “custom” type which will allow us to embed the Google Maps iframe code.

joomla-custom-module-type

Now, we can’t really paste the embed code to the text editor, that’s why you need to toggle editor, paste the code and then choose the position where the map will be located.

Joomle-Google-Maps-Code-Injection

Now you will find your map in the part of the page which you have chosen before and just change its size, so it will fit your website perfectly. On the GIF above it was showed how to generate the Google Maps iframe code but if you would like to get more detailed information about it, read how to embed Google Maps in HTML.

Embed Google Maps – Squarespace

Squarespace is really fast growing e-commerce software which also let you run your online business. If you want to connect your online shops with the physical ones you also need Google Maps to show the customers your locations.

squarespace-dashboard

As you can see the Squarespace dashboard is really intuitive and easy to use. If you would like to embed Google Maps on a single page, then you need to go to the “pages” tab. Now you need to choose the page which interests you(most people use the contact page to embed a map).

squarespace-pages

Once you mouse over the page you will notice a rack, click on it and you will display settings of the current page. Now go to the advanced tab and there you have a possibility to inject the code into the header of the page.

squarespace-google-map-page-gif

Of course to make the map fitting the size of your website change the width and height values.

square-page-map

There is also another method which will allow you to add Google Maps to every page on your website. You need to go back to the dashboard and then to the choose the “settings tab”. Now, find the “advanced” tab and then the code injection feature which will allow you to modify the header of your website, its footer and a lock page. In our case, we will try embedding Google Maps to the footer.

SQUARESPACE-CODE-INJECTION

Save the changes and go back to your website to see if your map displays in the footer. For us it works perfectly, the only thing required is to modify the size of the map thanks to the width and height value.

squarespace-map-preview

That’s all about embedding Squarespace Google Maps, if something didn’t work for you try to do it step-by-step once again or contact us so we will help you out for sure.

Final thoughts

Embedding Google Maps into a website is really easy and doesn’t require any bigger knowledge, especially if you follow our guide. It is such a worthy move for your business for such a small effort. Remember that Google Maps is a good choice when you want to show the single location of your house, shop, etc. but not really when you have multiple physical stores. When it comes to a big business, you should use a professional store locator which will let you set all the details such as opening hours and logos in a few minutes. Nearplace is a really great choice because of its amazing design and easiness in usage and the most important – it is free. If it will be your first store locator don’t be afraid and type to our support and we will help you for sure with everything you need!

nearplace-demo

Get notified of new articles
45,285 marketers are