Error with loading of Google Maps

17 replies · opened Aug 4, 2016

Nnyc17Aug 4, 2016

Hi

I am experiencing the following problem with loading of Google maps.

"Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details."

The map displays fine offline, but will display the above error when on localhost or online. Eg:
http://dewcube.com.sg/examples/dragonbeardcandy/one-page/op-section1.html

Please advise. Thanks!

Ddixonc1Aug 8, 2016

Any updates on this? I have the same issue.

SSemicolon WebSTAFFAug 8, 2016

Hello,

You will need to use an API Key for the Google Maps. Using the Google Maps API Key was optional before but it has become mandatory recently. Please find the following code:

http://maps.google.com/maps/api/js

and replace it with:

https://maps.google.com/maps/api/js?key=YOUR_API_KEY

You can generate your API Key for Google Maps from here: https://developers.google.com/maps/documentation/javascript/ and then Click on Get a Key in the Header.

Additionally, make sure you select the Browser Key and also add your Domain Name in the HTTP Referrer Section.

This should definitely fix your issue. Let us know if we can help you with anything else or if you find any further issues.

Fflyingfinn64Aug 8, 2016

Hello have some probles here with API. Created API saved the refferal domains but i get a white map. Is there a way to set coordinates instead of adress?

SSemicolon WebSTAFFAug 9, 2016

Hello,

Please consider enabling the GeoCoding API in order to fix this issue. Additionally, you can simply remove the address Option from the Google Maps JS Script and then add a latitude/longitude combination in the Code. Example:


	jQuery('#google-map').gMap({

		latitude: -37.9712369,
		longitude: 144.4926746,
		maptype: 'ROADMAP',
		zoom: 9,
		markers: [
			{
				address: "Melbourne, Australia",
				html: 'Hi, we\'re Envato
Our mission is to help people to **earn** and to **learn** online. We operate **marketplaces** where hundreds of thousands of people buy and sell digital goods every day, and a network of educational blogs where millions learn **creative skills**.
',
				icon: {
					image: "images/icons/map-icon-red.png",
					iconsize: [32, 39],
					iconanchor: [13,39]
				}
			}
		],
		doubleclickzoom: false,
		controls: {
			panControl: true,
			zoomControl: true,
			mapTypeControl: true,
			scaleControl: false,
			streetViewControl: false,
			overviewMapControl: false
		}
	});

This should definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

Fflyingfinn64Aug 9, 2016

How to enable geocoding API? do i need to change the api key in the contach.html page again?

Fflyingfinn64Aug 12, 2016

sorry i dont want to use a server key i want the page to work with the standard api key and i cant see it working. i have a white page. why is that happening?

SSemicolon WebSTAFFAug 17, 2016

Hello,

The Server Key is not required for this. You will simply need to click on the Get a Key Button and then Choose your Project and Enable the API.

This will definitely work fine.

Let us know if we can help you with anything else or if you find any further issues. Thanks. :)

Fflyingfinn64Aug 22, 2016

anything new on that? i need to make it work

Fflyingfinn64Aug 22, 2016

fixed close it

LlgreenlyAug 25, 2016

Could you check this page to help me fix my "Oops! Something went wrong." error? http://www.digitaldentiststudio.com I changed the latitude/longitude within the gmap.js file Please send the specific coding change. I need all the help I can get! Thanks!

LlgreenlyAug 25, 2016

I created an identical website for a previous client. The map works on drnukk.com, but will not work on digitaldentiststudio.com. The only change I made was the lat/long on the gmap.js page. Again, any help is greatly appreciated.

SSemicolon WebSTAFFSep 6, 2016

Hello,

[sb_private_reply]We Really Apologize about the Delays in replying to your Support Query and Really Really Appreciate your Patience with us![/sb_private_reply]

We have just checked out your Page and the Google Maps seems to be working fine for us. Additionally, if you are still facing this issue, then please consider adding your Domain Names in the Allowed Referrer List of the API Key Console. This might fix it for you.

Thanks for your Patience. Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

GgiorellSep 13, 2016

I finally figured out how to fix it, and they fail to mention this part. You have to find the two lines of code where you can put in your API key:


	
	

	

		jQuery('#google-map').gMap({

Look for those five lines of code. Where it says YOUR_API_KEY, that's where you insert your key from google. you can get the link from earlier posts above. I hope this helps.

SSemicolon WebSTAFFSep 15, 2016

Hello,

Thank You so much for the Explanation. We will surely make sure that we add that information to Our Future Replies. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard