I have Long and Lat populated. I have checked my API key (which is the same as on my live site, and it works there with no problem). I have checked the API referrer restrictions and ensured that they are set correctly.
I even removed the restrictions as a test. That still didn’t get it working. According to the Google Docs, you can add wildcard domains to the list. But that didn’t work, even for the production site so I added each domain separately. That still didn’t work.
The error message returned is
js?callback=bricksMap&v=3.exp&key=AIzaSyBXC4LAULm9Cn12VxhaN-udECSCj0gjJDs:78 Google Maps JavaScript API error: ApiNotActivatedMapError
https://developers.google.com/maps/documentation/javascript/error-messages#api-not-activated-map-error
Not completely sure but since you want to show the map on a subpage (/contact/) I think you need to add a wildcard for this. It should be something like dev.torontoheadshot.com/* (or dev.torontoheadshot.com/contact if you want to be very specific).
Here’s the thing, this works on my production site, on the contact page using the referrer settings as they are.
The ONLY difference between the two sites is the production site uses Oxygen, and the dev site uses Bricks. The DEV site also has practically zero plugins installed. The PROD site has a bunch.
There are no optimization/minimization plugins nor is there any caching.
As a test, I removed all referrer restrictions from the API key. My production site works but the dev site does not.
This needs some closer inspection by devs to figure out what is going on.
yeah. different API.
i have been stuck with this same issue for a location application i was building. took me coming to this thread to figure it out. HAHA
