乐竞电竞投注软件下载
How to change the author in WordPress for a post
February 17, 2020
How to increase the WordPress memory limit
February 24, 2020Responsive Google Maps can be an essential part of your site. These maps are vital for letting your customers know where you are located, even if you don’t own a physical shop. Many sites utilize the Google Maps widget as it is the easiest to use, the most responsive and intuitive tool.
Embedding the Google Maps widget is fairly simple and you need to do it yourself because , Google doesn’t provide support for these kinds of things. You can either add responsive Google Maps via third-party plugins, or by altering a few lines of code. Both ways will work, but it’s important to know exactly how to do it.
The following is a simple tutorial on how to add responsive Google Maps widgets to your website.
Why Responsive Google Maps?
Google Maps are very familiar, but the term responsive is largely unknown, and it is important to know what it means. If something is called responsive, we expect a complete performance based on user’s behavior and an environment that will work regardless of the screen size, platform, or device type.
A responsive widget works with the same, high standard of quality, whether it’s accessed by your phone, laptop, or computer.
However, the website actually needs to adapt to these various settings and resolutions utilizing the CSS design and the concept of flexible grids and layouts. Your site should automatically adapt to the changes in the device, so the site should work if you try to access it from your phone and then go to your iPad or computer.
The website needs to adapt to the user’s changes. It is crucial for the website to do so in order to prevent various site versions and different design phases. Responsive Google Maps are no different, and in many cases, they can be a vital part of a website.
How to Add a Responsive Google Maps Widget to Your Site With Code
Embed the Map
The first step is to add the maps to your site and embed them, which will allow the widget to appear. This process is easy and only takes a few simple steps. You can opt to do it manually, however this does not yet mean that the maps will be responsive.
- Go to Google Maps, enter the location
- Click search
- On the right-hand side, click on Share
There you will find the embedded code. Copy the Embed code, and it should look something like this (this is the default embed code for Google Maps)
Add the Map in WordPress
The next step is to add the map within WordPress.This is very easy and you will have to edit a post or a page. Adding the maps to the specific pages works for most people, especially if it is a page where the user talks about their location. Add it this way:
Go to Posts > Add or Pages > Add
Next, open the HTML editor in text code and add the embedded code where you want the map to be displayed.
Click on Save Draft, then Update, and Publish whenever you are ready.
Now you should see the map on your page or site however the process is not yet complete, as we also need to make it responsive. If the maps are not visible, check twice if you made any mistakes with the code.
Making the Map Responsive
You have your maps and you can now make them responsive. This is desirable to enable a better user experience and show the map from wherever it is viewed, and from whichever device. Responsive Google Maps are important for your site.
At the moment, the default size of the embedded maps is 450px, which is 75% of the default width at 600px. It is specified so within the embedded code.
To make the maps responsive, you will have to change a few codes of your CSS design. This includes adding a couple of rules to your CSS code and wrapping the IFRAME inside the rules.
This is an example of the responsive Google Maps CSS code. You can freely change the value of the aspect ratio with changing line #4 (padding-bottom). Here is the code:
This will make the maps responsive, and means they will adapt to various screen sizes and other different devices.
Adding Responsive Google Maps with Themes
Some themes enable Google Maps to embed very easily, because many users need these maps, and they already have various themes and pre-made designs built-in.. This is good news for those who want responsive Google Maps already embedded however, you will still need a Google API to get the maps to work. The following guide will show how to add responsive Google Maps with themes.
Begin the API process on the Google website.
- Click on Get Started (the blue button).
- In the top left, select the menus indicated by three lines.
- Click on APIs & Services, and select Credentials.
- Select Create Credentials, then API key.
- Select Restrict Key and choose HTTP referrers.
- Save.
- Copy your API key, paste it into the design options page.
You can now add Google Maps to your theme using the theme design tools. If the theme is responsive, then you will also have your maps responsive.
Using Plugins to Add Responsive Google Maps
Plugins are a very easy way to add responsive Google Maps to your site, if you don’t want to change the code, or if your theme doesn’t offer the implementation.
In addition to adding the Google Maps, these plugins will also enable you to create a filterable store locator, and display posts or custom post types on your map.
They are user-friendly because they use shortcodes.
This is how to add maps with plugins:
- Go to WordPress, go to Plugins, click on Add New.
- Look for Google Maps, and select the plugin.
- Enable it with plugins, go to Settings.
- Where you want to add the map, you can add the plugin.
These maps will still need the Google API to work properly, so make sure you take care of that first.
Some recommended WordPress Google Maps plugins are:
WP Google Map Plugin
This plugin is full of features and functionalities.
If you enjoyed reading this article about responsive Google Maps, you should read these as well:
