Got Google Geocoding working, but can't get the map to work. When I try to map a contact, a map flashes briefly but is replaced immediately by the error screen in the 1st snippet below.

The Google Cloud dashboard shows my Geocoding work, but none of my failed mapping requests are counted (2nd snippet below). The CiviCRM log (in sites/default/files/civicrm/ConfigAndLog) shows all my errors while I worked on Geocoding, but no errors since I moved on to mapping.

In case it helps anything, the relevant page source (anonymized) is listed below the snippets. Apologies I can't get the markdown any better. Any help appreciated.

Im on CiviCRM 5.21.0 and Drupal 7.69.

Google Maps error

Coogle Dashboard

<script src="//maps.googleapis.com/maps/api/js?key=012345678901234567890123456789012345678&sensor=false&callback=initMap" type="text/javascript" defer="defer"></script>

function initMap() { var latlng = new google.maps.LatLng(27.000001,-82.000001); var map = new google.maps.Map(document.getElementById("google_map")); map.setCenter(latlng); map.setMapTypeId(google.maps.MapTypeId.ROADMAP); setMapOptions(map); }

function setMapOptions(map) {
    bounds = new google.maps.LatLngBounds( );

  var data = "<a href='/civicrm/contact/view?reset=1&amp;cid=123'>snip</a><br />Main<br />snip<br />snip<br />snip<br /> United States<br /><br />Get Directions FROM:&nbsp;<input type=hidden id=to value='snip'><input type=text id=from size=20>&nbsp;<a href=\"#\" onclick=\"gpopUp(); return false;\">&raquo; Go</a>";

  var address = "snip<br />snip<br />snip<br />snip";

      var point  = new google.maps.LatLng(27.000001,-82.000001);
var image  = null;
                            image = "/sites/all/modules/civicrm/i/contact_ind.gif";

            createMarker(map, point, data, image);



function createMarker(map, point, data, image) {
    var marker = new google.maps.Marker({ position: point,
                                          map: map,
                                          icon: image
    var infowindow = new google.maps.InfoWindow();
    google.maps.event.addListener(marker, 'click', function() { infowindow.setContent(data);
  • What's in the javascript console on the page where you see the "oops"? Use CTRL-SHIFT-I for chrome and CTRL-SHIFT-K for firefox. (Not the developer console at google but the browser's javascript console.)
    – Demerit
    Feb 17, 2020 at 0:13
  • The error message in the browser console was quite clear, request from 'X' referrer with 'Y' IP address is not authorized. Not being a web developer, it took me a while after posting the question to realize that the JS console was in the browser. Once I opened that the solution was obvious. Again, my bad.
    – wil_SRQ
    Feb 17, 2020 at 14:38

1 Answer 1


My bad. I had restricted the key based on IP address which works for server requests to Geocode, but not for JS (browser) requests to map. Changed the restriction to referrer and maps now display correctly.

  • Thanks - that saved me a lot of time!
    – ChumKui
    Nov 19, 2020 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.