1

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);
            bounds.extend(point);

            map.setCenter(bounds.getCenter());
                map.setZoom(16);

}

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);
                                                                infowindow.open(map,marker);
                                                               });
}
  • 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 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. – SRQ_civicrm Feb 17 at 14:38
2

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.

| improve this answer | |
  • Thanks - that saved me a lot of time! – ChumKui Nov 19 at 16:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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