How to Fix Divi Google Maps Api Error on Google Cloud Platform

How to Fix Divi Google Maps Api Error on Google Cloud Platform

Welcome to this quick fix tip for the most common issue that you can experience with the Google Maps module on the Divi theme

If you have recently deployed or transferred your WordPress website with Divi on Google Cloud Platform and your Divi Map module isn’t working anymore. You might be the victim of the most common error which usually arrives

Oops! Something went wrong.

This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

Divi Google Maps Api Error Oops! Something went wrong.

In the Google documentation, there are several different ways to obtain a key. You did a lot of searches on the internet but couldn’t find any working solution?

Well, then you have landed on the right page, in this tutorial, I am going to demonstrate how you can easily create an API key and fix Oops! Something went wrong error for Google Map on Divi powered WordPress website hosting on Google Cloud Platform.

But before that lets find out:

Why Divi Map isn’t working for your page?

  1. You did not put the API code in Divi theme options
  2. Your Google API is not enabled
  3. You have exhausted your daily 25K requests limit.
  4. You have an unsecured/unrestricted API which is being abused by other users.

This error has turned into a very common widespread ever since Google Maps have discontinued supporting keyless API access(any request that doesn’t include an API key) after allowing  FREE access to keyless usage for around a decade.

On June 22, 2016, Google has also released a post at its official blog about it. Check out Google Maps API no longer support keyless access for a detailed explanation of this update.

Common possible error codes returned by the Google Maps

Listed below could be the most common errors :

google maps api error: apinotactivatedmaperror

You have not enabled the Google Maps API KEY.

google maps api error: invalidkeymaperror

You have entered an incorrect Google MAPS Javascript API KEY.

google maps api error: referernotallowedmaperror

You are trying to use a secured API key on a different website

google maps api error: deletedapiprojectmaperror

You are have deleted your project and trying to access deleted API Key

google maps api warning: noapikeys

Fixing Divi Google Maps API Error in 5 easy steps:

if you are using Google Cloud Console the first step is to enable Google Maps Platform and Obtain a Google Maps API Key on GCP.

In order to achieve this login to your Google account and head over to

https://cloud.google.com/maps-platform/

Click on GET STARTED as illustrated below :

Google-maps-api-get-started

Enable All 3 Google Maps Platforms by selecting

  • Maps
  • Routes
  • Places

Enable-Google-maps-platforms

Click Continue select your project from the drop-down menu and accept the terms of service and proceed to next step

Select-a-project-GSC

Following Pop up screen will show you this will enable 17 Maps Platform API(s) and create an API key for your implementation. Just click next and jump to the next step

enable-your-google-maps-API

There you have it you’re all set! Your Google Maps Platform API key is successfully generated. Simply copy it.

Google-Map-Platform-API-Key-success

Add Google Maps API Key in Divi Theme

Log in to your WordPress dashboard navigate to Divi Library from the left menu to Divi > theme option

divi-theme-options

Paste the Google Maps JavaScript API key in the Divi Theme Options General Setting Tab and save it.

Pasting-google-maps-api-key-in-divi-theme

Usually, it is real-time but sometimes it may take up to 5 minutes for settings to take effect.
Now after 5 minutes, simply go to the page where you have added Maps to Your Divi Website and refresh the page.
You will find out “this page didn’t load google maps correctly” error has been solved and your MAP is fully functional now 🙂

Divi-Oops-something-went-error-solved

Protecting the Google Maps API Key

The next step is to improve the security of your newly generated API key.

Before you proceed further, I’d like to inform you this step is completely optional you can totally skip it.

This is necessary for users:

  • Who has a high amount of traffic and requests 25,000 map loads per day  (Learn more about the Premium Plan Usage Rates and Limits)
  • Who is concerned about the unauthorized use of their API key from being used by a third party website or app, ultimately thresholding your daily 25k map load allowance without your permission.

So, securing your API key is a Brilliant Idea and I recommend you to do this.

How to secure Google Maps API key?

Securing your API key and applying Restrictions will help you prevent unauthorized use and of the key and also protect your daily quota theft

You can go to google maps API console directly by clicking the API console button right below your API key. This opens up a new window.

API-console-linkOR

Directly follow this URL

https://console.developers.google.com/apis/credentials

You can give any name you want for instance I have given Google Maps API key DDM

specifying-Application-restrictions-Google-Maps-API

Scroll down Under Key restriction, choose “HTTP referrers”

Accept requests from these HTTP referrers (websites), add the two entries below

enter the entry described below as follow:

http:// (or) https://*.delhidigital.marketing/*

(Replace delhidigital.marketing with your own domain name)

By keeping this entry (with asterisks *’s for wildcards) will help ensure your maps work on any URL within your own website.

Click the Save button and you’re done! You have successfully secured your API key.

Feel free to share your thoughts on the Google API changes in the comments below. You can also use the comment section below if you are facing any difficulty setting up the API key on your favorite Divi map module running on Google Cloud Platform

What is Web 1.0, Web 2.0 & Web 3.0 Really? [The Ultimate Revelation]

What is Web 1.0, Web 2.0 & Web 3.0 Really? [The Ultimate Revelation]

On the web Just like any other industry We (Digital Marketing & SEO industry) also have our own special terms, Web 1.0, 2.0 & 3.0 are one of them.

Being aware of the numerous advances in Digital Technologies is not an easy task. You’ve probably come across the terms like Web 1.0, 2.0, 3.0 etc. many times and eager to know what exactly they are? what does all these web nonsense have to do with me as a digital marketer?

So, if you look up for the definition you will get so many results like Wikipedia, blogs etc., they are technically correct but that is just the one part, they are not so much understandable.

In this post, I am going to uncover all crucial information on one of the biggest web revolutions the web 3.0 as well and make sure these terms do not haunt you anymore.

What is Web 1.0?

Web 1.0 is the first stage of development of the Internet. It was very beginning of the web in the early 1990s.

Definition of Web 1.0 was never actually defined and a matter of debate as the term web 1.0 was created indirectly, not clearly, as a result of the creation of Web 2.0 and named after web 2.0 which was popularized by Tim Oreilly to classify websites driven by the user-generated content in the early 20’s.

Web 1.0 is the first generation of the Web. A static website which is totally build up of text and web pages interconnected by hyperlinks and used as the information portal. It is also referred to the read-only web. There was no direct exchange of communication between the reader and the publisher of the information.

Old directory services, such as Altavista, Yahoo! A Web portal is a great example of Web 1.0, as well as some basic Web development tools (e.g., HTML editors) Mosaic (web browser)

Personally, I don’t find much value looking at Web 0.1 or Web 1.0. It’s pretty useless nowadays, the internet is much more advanced. Web 1.0 is outdated and replaced by web 2.0 but there are still so many sites which deliver static simple information on some parts of their site.

What is Web 2.0?

Web 2.0 also referred to “Social Web” is the term given to represent a second generation of the World Wide Web.

Web 2.0 mainly emphasize the ability for people to accommodate and share information online engage and respond to the content rather than of just consuming it.

Web 2.0 focus mainly on user-generated content making Web more interactive. It delivers more powerful and dynamic interactivity than Web 1.0 where user-generated content was possible but very less but in Web 2.0 almost half of the web content is user-generated.

It basically describing websites that are aggressively responsive (can be handled easily on any device) and can be used more like application program than a normal ‘traditional’ website.

Morden Social media platforms like Quora, Facebook, Twitter, Google+, Pinterest, Reddit and video streaming platforms like Youtube, Vimeo etc. are the perfect example of Web 2.0 applications.

The Facebook Like button is the most ingenious invention of the Web 2.0 world. A simple like button really shaken the world of internet, when you like a post, video, page or a comment it expresses the sentiment of admiration and broadcast it to all the people connected within your social circle and multiplies it.

Benefits of Web 2.0

  • Web 2.0 helps interact and engage with each other
  • Web 2.0 comforts publishers to deliver content easily
  • Web 2.0 helps us receive content
  • Organizing content with Web 2.0 is a piece of cake.

What is Web 3.0?

Web 3.0 is the third stage of development of the world wide web also known as “the Semantic web” or “the intelligent Websometimes also referred to the decentralized web

Web 3.0 is an easy term with a far greater complex meaning. So let me make it simple but before digging any further it’s important to know what the term semantics actually means?

Semantics is related to syntax, in most programming languages syntax is how you say something where semantics is the meaning behind what you say.

still not understood? No worries Let me make it more simple

The syntax is like grammar in any programming language and semantic simply means what is the actual meaning behind it. have a look at the image below –

Syntax Semantics explained

apple vs apple

Same syntax. (apple) but different semantics (mobile phone or fruit)

GOOGLE (LSI) Latent Semantic Indexing is one of the great example of it. LSI s a part of Google Algorithm which focuses on the search intent of the user rather than just targeting on the keyword.

.Google now extracts definitions and facts and represents summaries in search results

Definition of Semantic Web 3.0

We can say, Web 3.0 is a “machine to user” approach which is more connected, open, and intelligent in simple words we can say a smarter web than Web 2.0.

Web 3.0: The encoding of meaningful knowledge on the web in a manner that “The Machines” can understand. It is about deploying AI in the web which can make decisions on behalf of the user automatically.

It is a technology used for collecting data/information and store it in a centralized system which provides realistic detail information like personal assistance with greater meaning, relevancy and ultimately value to the user.

Web 3.0, applications are capable of learning mechanism ruminate and deliver what they believe should be more relevant and useful for the user. For example, when you make a search on Google Maps, it displays all the possible routes to your destination and also give you the suggestion for the fastest route with distance and traffic information.

Bitcoin Blockchain is the first use case

Where can I get this web 3.0? Has Web 3.0 already arrived?

Web 3.0 has been around for a long time it’s been pushed by the same people who kind of invented architected and popularised the web itself but it hasn’t really cracked into the mainstream. If you haven’t actually realized till now that you already interacting with several web 3.0 technologies in your daily life.

Let me remind you smartphones, for example, are one of the biggest factors in this revolution incredible 4G speeds, Retina displays and technologies like cloud computing improve the web experience massively.

Facebook has also adopted AI in their algorithm. Look at the real example below in the image.

My friend had recorded a video of his pet name Baxter while moving in his car and there was some music playing in the background. As soon as he posted this video on the facebook, audio was automatically removed from it. With the warning message

Your video has been partially muted because it may contain music that belongs to someone else.

From self-driving cars to stores with no checkout stations, AI is changing our world which is a part of Semantic Web. It is already in and we are using it in our daily life. Image Shared above is a perfect example of this.

To get an idea about the evolution of world wide web visit this site evolutionoftheweb it has a nice graphical representation since the birth of the internet.

Still confused about web 1.0, 2.0, 3.0 ? Have any thought in your mind? Do not hesitate to use the comment section below 🙂