free consultation
Adding a Google map to a website is very simple and doesn't require too much time. The benefits of embedding a map are enormous. At the cost of a few minutes, we can easily embed the map in the contact sub-page or anywhere on the site. We will tell you how to solve the problem with the message : This page cannot load Google Maps correctly
Learn the benefits from implementing Google maps on your site. With Google map :
See our offer : wordpress website development
Table of Contents :
We can implement Google maps in two ways: by embedding a code frame on the page, which we download directly into the maps, or through Google's API. We will discuss the above ways of adding a map below.
This is our recommended way to implement the map on the site.
The advantage of this implementation is:
To use the API you need to plug in a payment card. You will receive $200 from Google to start which gives you 28,000 map impressions per month.
It is possible to set the budget so that it does not exceed $200 - that is, the use of Google Maps will remain free. However, in that case, if the limit of free impressions is reached, the map will stop displaying.
The way to use only free map displays is to set limits for payments in the payment option. Set the limit to 0 $.
You will get access to the API when you go to the Google platform at https://cloud.google.com/maps-platform where you will create an API key.
Logging into the panel is done by clicking 'Get Started'.
If you do not have a Google Maps Platform account, you will be asked to enter your data and plug in your payment card.
In steps 1 and 2, we fill in the necessary data needed to create an account
Generating an API key when creating a Google Maps account
In step 3 we enter the data needed to generate the API key
Next, the wizard will guide us in the process of creating an account and generating an API
View after logging into the panel.
In case if you want to plug / add / another key or project to your account, click the 'Create Project' button.
It is also worth activating the API for Geocoding and Geolocation services. You will do the activation from the AP Interfaces side menu or through indicators.
Below is a list of the necessary interfaces that should be enabled in the status.
A simpler technique to implement, it does not require complicated technical procedures, logging and downloading codes. All you have to do is as you enter your company's map or through the link https://www.google.pl/maps, click the 'share and post map' button directly from Google map.
In the popup that shows up :
Disadvantages of inserting a Google map in an iframe
There are several drawbacks to this method of embedding the map that are worth mentioning:
Google Maps supports four types of security that can be set. Application security restricts the use of an API key to specified websites, IP addresses, servers, or applications, which you can set when you first create an account for a key or in editing a project.
The types of application security are :
Don't put your API keys directly into the code of your website or application
A good practice according to the recommendations that Google (https://cloud.google.com/docs/authentication/api-keys) has made available is that API keys should not be placed directly in the code making them vulnerable to accidental public disclosure. It is a good idea to store them in variables or files outside the main structure of the site or application.
In the case of Wordpress, the map can be added both through a non-recommended iframe solution and using the received API code from Google Maps.
We can place the code, as appropriate, depending on the implementation, either in the theme configuration, plugin or prepared configuration in ACFpro fields.
If your wordpress does not have the option to integrate after API with Google maps in the settings, you can use the plugin. Link to the plugin : https://pl.wordpress.org/plugins/wp-google-maps/
By going to the plugin menu ie: maps -> settings -> advanced - paste the API key
General settings
In the settings of the WP Go Maps plugin, you can choose options:
Themes tab
You can also change the look of the map according to predefined presets.
Advanced
In the free version of the plugin, you can add multiple tags but without the option to adjust them. Only a standard pin is available.
In addition to move in :
See also:
We often get inquiries from customers about the problem and reported message in google map not displaying correctly. The map view on the site is blocked and looks like below.
The problem with the correct loading of the google map may occur for two reasons:
Digital Agency Hauerpower
Copyrights 2010-2022
