• Oops! Something Went Wrong - Google Maps - SOLVED

    Helping you resolve the most annoying issue when building your website

  • The best place to get your “Oops…” broken Google Maps issues resolved in minutes

    The vast majority of the business websites on the internet need to display one or more maps, for example to show where the business is located. Ever since Google launched Google Maps on February 8 2005 this was possible. The introduction of user friendly Content Management Systems (CMS-es) like WordPress, Drupal and Joomla made integrating with Google Maps even easier until around the 22nd of June 2016, since Google decided to change their policy when it comes to embedding their Google Maps services on any new website. Note that I say “new”, since Google Maps will work in the old “easy” way on domains that already existed before the 22nd of June 2016. For new domains / website (or for older domains that never used Google Maps before that date), embedding a Google Maps on their site is still possible for free, but -unfortunately- there’s some more technical steps requires before the map will show up properly. If you don’t setup the Google Map properly, the Google Maps will be broken. We have seen many, many people searching for a solution for their problems. This website will resolve any issues you might bump into while embedding the map.

    Lets first see how the Google Maps errors looks like

    Lets first take a look at how the error will look like that we are tackling here. At the moment you insert the Google Map on your website (for example on WordPress, although it will happen also on other CMS-es like Joomla, Drupal, etc, and also for plain HTML sites) it initially shows up shortly, only to be replaced with some annoying text. The text will say: “Oops! Something went wrong. This page didn’t load Google Maps correctly. See the JavaScript console for technical details”. Ok great, so you probably think: “now what?”. After seeing this error you probably have no clue on why this happens, nor how to resolve this. Here’s a typical screenshot that shows the error message when the map is rendered.

    google-maps-error-showing-on-website

    Am I the only one with this error?

    “Why is this happening to me?”, you might wonder. Well, its not something that only happens to you, it simply happens to anyone that will embed on a new website/domainname. In fact, as you can see in the graph below, the amount of people that have this issue is so huge, that its visible as a search trend, according to Google Trends:

    oops-something-went-wrong-google-maps-trends

    The Google KeyWord Planner gives even more insights in the number of people experiencing this issue each month; every months between 1000 and 10.000 people are searching in Google to get this issue resolved.

    oops-something-went-wrong-keyword-planner-search-volume

    Embedding Google Maps the proper way

    Embedding Google Maps on your site the proper way consists of a couple of steps. Follow the steps below.

     

    The proper way to embed Google Maps on your website, is to register for a so called

     

    There’s many different issues that could cause the Google Maps to not show up properly.

    The following video shows how to resolve the

    For most people that video solved their problem, but it could be that in your case it doesn’t. We therefore have created a second video that shows the exact steps how we signed up for the Google Maps API Key;

    After we created the second video with additional cases covered, we found out some people still managed to get the oops issue. It appears there’s one other reason why it could fail. You can see it, if you view the Javascript console of the browser, and it goes like so;

    Update 1 aug 2017; its amazing to see how many people struggle to get their Google Maps API key setup properly, if you would ask me Google really is making the life’s of people harder then is needed. We got a question from Don this time, as he did went through all the steps, but he keeps on seeing (in the console) the error “RefererNotAllowed”. So the key is configured, but its not yet valid. As the keys are bound to private accounts, there’s no way for us to check from the outside if the setup process was done correctly. I therefore recorded a new video that explains again all the steps to tackle this RefererNotAllow error. During the making of the video I bumped into another error, which was the “ExpiredKeyMapError”. That one was caused by the fact that the new key was not synchronized across all servers of Google yet. So as you can see in the video, this error automatically resolved itself in a couple of minutes. Here is the full walkthrough (step by step) on how to resolve that RefererNotAllowed error, hope you like it!