Answers.Body: <p>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.</p>
  
  <p><a href="https://i.sstatic.net/5vM4a.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/5vM4a.png" alt=""></a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-11-19T16:24:27.170Z
Answers.Text: Thanks - that saved me a lot of time!
Answers.UserDisplayName: ChumKui
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-02-17T03:00:20.753Z
Answers.LastActivityDate: 2020-02-17T03:00:20.753Z
Answers.UserDisplayName: wil_SRQ
Body: <p>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.</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Im on CiviCRM 5.21.0 and Drupal 7.69.</p>
  
  <p><a href="https://i.sstatic.net/Dr3jO.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/Dr3jO.png" alt="Google Maps error"></a></p>
  
  <p><a href="https://i.sstatic.net/YyXTy.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/YyXTy.png" alt="Coogle Dashboard"></a></p>
  
  <pre><code>&lt;script src="//maps.googleapis.com/maps/api/js?key=012345678901234567890123456789012345678&amp;sensor=false&amp;callback=initMap" type="text/javascript" defer="defer"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
      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);
      }</p>
  
  <pre><code>function setMapOptions(map) {
      bounds = new google.maps.LatLngBounds( );
  
  
    var data = "&lt;a href='/civicrm/contact/view?reset=1&amp;amp;cid=123'&gt;snip&lt;/a&gt;&lt;br /&gt;Main&lt;br /&gt;snip&lt;br /&gt;snip&lt;br /&gt;snip&lt;br /&gt; United States&lt;br /&gt;&lt;br /&gt;Get Directions FROM:&amp;nbsp;&lt;input type=hidden id=to value='snip'&gt;&lt;input type=text id=from size=20&gt;&amp;nbsp;&lt;a href=\"#\" onclick=\"gpopUp(); return false;\"&gt;&amp;raquo; Go&lt;/a&gt;";
  
    var address = "snip&lt;br /&gt;snip&lt;br /&gt;snip&lt;br /&gt;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);
                                                                 });
  }
  </code></pre>
  
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-17T00:13:45.890Z
Comments.Text: 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.)
Comments.UserDisplayName: Demerit
Comments.ContentLicense: CC BY-SA 4.0
Comments.CreationDate: 2020-02-17T14:38:42.057Z
Comments.Text: 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.
Comments.UserDisplayName: wil_SRQ
Tags: <map>
Title: Google error "This page didn't load Google Maps correctly."
ThreadText: # Google error "This page didn't load Google Maps correctly."
  
  (Asked by: username_0 on 2020-02-16)
  
  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](https://i.sstatic.net/Dr3jO.png)](https://i.sstatic.net/Dr3jO.png)
  
  [![Coogle Dashboard](https://i.sstatic.net/YyXTy.png)](https://i.sstatic.net/YyXTy.png)
  
  ```
  <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);
                                                                 });
  }
  
  ```
  
  **Tags:** map
  
  > **Comments:**
  > **username_1**: 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.)  
  > **username_0**: 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.  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_0 on 2020-02-17. Score: 3 | Accepted answer
  
  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.
  
  [![](https://i.sstatic.net/5vM4a.png)](https://i.sstatic.net/5vM4a.png)
  
  > **Comments:**
  > **username_2**: Thanks - that saved me a lot of time!  
  
  ---
  
  