Problem
To install maps API in my Drupal CMS website for events location and places and secondarily include maps in articles.
Solution
Install map api from providers, preferably based on ease of use and accessibility in terms of cost restrictions etc. Drupal Geolocation module seemed a good place to start as I already had a google account. Geolocation module easily integrates Googlemaps into its options. However there are other alternatives such as Geofield, Leaflet, Maps, Openlayers which can be integrated with GeoServer an opensource geospatial data resource. that may be deployed in Drupal CMS. In this instance I have opted to run with Geolocation module with Googlemaps. Hopefully this is sustainable as there is potentially cost implication user exceeds the monthly free allowance.
I installed Googlemaps API and set up 'Location' or 'Map' on the required page. However first problem I ran into was the map on the page was 'greyed out'. This was similar in all browsers. I investigated this issue for a while, deleting and recreating the page. Searching the web for solutions, I realized Googlemaps api requires a billing account to be set up. It proposes that each account has up to £200 credit monthly and the account is not charged until this sum is exhausted. There is the option of creating a daily alert on how much one has consumed.
The map displayed correctly once I had set up a billing account. However this was only functioning - displaying correctly on chrome, explorer and opera and also on my mobile device but not on mozilla.
On mozilla, the map block displays but disappears immediately replaced with the error message 'Oops! Something went wrong'.
I initially thought this was linked to cache issues on Mozilla browser. Cleared the catch etc but this did not resolve.
I went on developer and inspected the elements on Mozilla and compared with that displayed on other resolved browsers such as Chrome or Explorer. Observed that the maps api answer code was different in mozilla compared to the other browsers. This essentially confirmed the problem was with the api set up. Still not sure how else to resolve this, did more search this time looking at the debugger and js error details.
It occurred to me this could be due to restriction settings not well described. On google api developer page, I observed that entering 'example.com' alone may not suffice as a path is required.
"A specific URL with an exact path: www.example.com/path Any URL in a single subdomain, using a wildcard asterisk (*): sub.example.com/* Any subdomain or path URLs in a single domain, using wildcard asterisks (*): *.example.com/* A URL with a non-standard port: www.example.com:8000/* " - Google cloud console clients api account page.
Based on this information I updated the restriction settings to reflect these paths.
Boom! Mozilla googlemap block resolved correctly! This was quite satisfying. Nearly comparable to winning the lottery - for a minute. Gave myself a big 'High five' - problem solved!
I hope this helps someone else in similar difficulty