Google map on the page. Ways to implement and customize the map style
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
Benefits of adding a Google map
Learn the benefits from implementing Google maps on your site. With Google map :
- you will use additional information and data about the company on the site,
- improve the credibility of the company, Google maps with high ratings, inspire confidence,
- show feedback from customers and real users,
- improve the visibility of the site in search results / although this is not a priority factor /.
- allow customers to share the route to the company
- with a well-run map i.e.; Google business card, you can build visibility in local results in Google maps
See our offer : wordpress website development
Table of Contents :
- ways to implement Google maps on the site
- embedding google map on the website via API
- embedding google map the iframe way
- how to add a map to a site on wordpress
- ways to secure API keys
- map problem : This site cannot load Google Maps correctly
Ways to implement Google maps on your site
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.
How to insert a Google map through the Google Maps API ?
This is our recommended way to implement the map on the site.
The advantage of this implementation is:
- The ability to personalize the appearance and settings of the map,
- zoom settings for the map,
- customize the pin and put your own content including logos and graphics,
- Better implementation performance over the way it is embedded via iframe,
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 $.
Placing a map through the API step by step
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 in and creating an account with Google Maps Platform
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.
Important interfaces that should be included
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.
- Directions API
- Distance Matrix API
- Geocoding API
- Geolocation API
- Maps Embed API
- Maps JavaScript API
- Maps Static API
- Places API
How to insert a Google map into a page through an iframe ?
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 :
- click the ''place map'' button,
- select size,
- Click 'copy HTML',
- the generated code can be pasted anywhere on the page regardless of the CMS system and the technique of making the page
Disadvantages of inserting a Google map in an iframe
There are several drawbacks to this method of embedding the map that are worth mentioning:
- Lack of visual customization and personalization of the map,
- Inserted code is an iframe that is the placement of other code rigidly in the code of our site,
Ways to secure API keys in Google Maps
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 :
- HTTP referer allows you to set restrictions for a specific domain, site, group of sites
- IP addresses - restricts use to one or more IP addresses
- Android applications - restricts use to calls from Android applications
- iOS apps - restricts use to calls from iOS apps
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.
How to add a Google map to a site on Wordpress ?
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.
WP Go Maps plugin
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:
- Shortcode - shortcode to place the map anywhere on the page,
- Map name - the name of your map
- Zoom level - map view
- Width - the width of the map in the container, if not defined then the dimensions of the map will be taken from this field, to set the value in px, %.
- Height - to be set similarly to width
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 :
- GPS address/position,
- Animation - animation of the tag,
- Information window open by default - that is, a tooltip/smoke above the marker that can be opened on start or when clicked on
See also:
This page cannot load Google Maps correctly
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:
- Connected payment methods have been removed or payment from the card has not occurred. For this, it is worth checking the billing tab in the Google Maps dashboard. The problem occurs with the embedding of maps before the period of introduction of restrictions and limits on map displays in the free version, where you did not yet have to provide a payment card to unlock the API
- The project has been removed from the panel.