#StackBounty: #google-maps #api-key Google Maps APi for both localhost & production server, as of April 2019

Bounty: 100

Tl;dr – my code works fine on my laptop when accessed as file://<path>/index.html, but not on my laptop with an Apache server running when accessed as htpp://<path>/index.html, nor on my real (production) server. I see no errors on the console, but the map is just a grey rectangle.


It has been a few years since I coded any Google Maps applications.

It seems that, as of last year, it is now necessary to have an API key, by providing it with credit card details, and to provide it with each API call.

Unfortunately, there is a lot of information about this, much/most of it out of date and/or contradictory.

Can anyone point to the canonical guide, preferably with screenshots, of how to configure this?

I wish to draw a map, and add some makers, which will requires reverse gecoding, such that I provide a street address and convert it to lat/lonng in order to place the markers.

Sounds simple enough, but which of the many thousands of “helpful” site has gotten it right?

For instance, what seems to be the current Google help page speaks of

From the Navigation menu, select APIs & Services > Credentials.
On the Credentials page, click Create credentials > API key

But I can’t even see that menu option πŸ™


[Update] If it helps any, the error messge in the developer console said :

Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key


[Update] I am trying to access the API like this

<script src="maps.google.com/maps/api/…>

and

var url = 'https://maps.googleapis.com/maps/api/geocode/json?address=' + comapnyLocation +'&key=XXXX'; 

$http.get(url)

[Update++] in the developer console, I see a bunch of errors along he lines of:

aliextension.com/wp-content/uploads/2017/08/JAR.png:1 GET https://aliextension.com/wp-content/uploads/2017/08/JAR.png net::ERR_CONNECTION_TIMED_OUT

I have no idea what aliextension is, nor does it appear in my code (maybe in some minified JS?)

Ok, it is something to do with AliExpress (Ali Baba). I removed it & the timeout messages go away, but I still have problems.

If I load teh index.html into Chrome as a file://, then it works just fine. But, if I load it `as http://, where I have an Xampp Apache server running, the map box remains grey, although I see no error messages. The same thing happens on my real server πŸ™


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.