Google Map not displaying in JS Fiddle (RefererNotAllowedMapError)

Question

I am having an issue with getting a map to display in JS Fiddle. It's this example:

https://developers.google.com/maps/documentation/javascript/examples/directions-waypoints

I got the code working with my api key by pasting into a blank html doc but when I paste the full JavaScript + HTML into JS Fiddle (all into the HTML field, not ideal formatting but it should still work, right?) it gives the console error "Google Maps API error: RefererNotAllowedMapError."

I tried pasting https://maps.googleapis.com/maps/api/js into external resources but that didn't change anything.

If I do have the external resource added, would I still need

<script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

in the HTML or can I just get rid of it?

Thank you for any tips on getting this to work in JS Fiddle!

This might help: http://stackoverflow.com/questions/32600314/google-maps-api-referrer-not-allowed — Satej S, Mar 28 '16 at 04:45

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

The error you are getting: Google Maps API error: RefererNotAllowedMapError. means you don't have a valid key for that domain.

RefererNotAllowedMapError Error

The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google Developers Console.

See API keys in the Google Developers Console. For more information, see Best practices for securely using API keys.

Simplest fix (particularly for a site you don't own like jsfiddle.net) is to remove the key=YOUR_API_KEY& from the URL (that is not a valid key, and a key is not required, it is recommended).

UPDATE: Keys are now required. Google has a test key that works on jsfiddle: AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk (if you click on "open in JSFiddle" on there examples it is populated)

working fiddle

code snippet:

function initMap() {
  var directionsService = new google.maps.DirectionsService;
  var directionsDisplay = new google.maps.DirectionsRenderer;
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {
      lat: 41.85,
      lng: -87.65
    }
  });
  directionsDisplay.setMap(map);

  document.getElementById('submit').addEventListener('click', function() {
    calculateAndDisplayRoute(directionsService, directionsDisplay);
  });
}

function calculateAndDisplayRoute(directionsService, directionsDisplay) {
  var waypts = [];
  var checkboxArray = document.getElementById('waypoints');
  for (var i = 0; i < checkboxArray.length; i++) {
    if (checkboxArray.options[i].selected) {
      waypts.push({
        location: checkboxArray[i].value,
        stopover: true
      });
    }
  }

  directionsService.route({
    origin: document.getElementById('start').value,
    destination: document.getElementById('end').value,
    waypoints: waypts,
    optimizeWaypoints: true,
    travelMode: google.maps.TravelMode.DRIVING
  }, function(response, status) {
    if (status === google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
      var route = response.routes[0];
      var summaryPanel = document.getElementById('directions-panel');
      summaryPanel.innerHTML = '';
      // For each route, display summary information.
      for (var i = 0; i < route.legs.length; i++) {
        var routeSegment = i + 1;
        summaryPanel.innerHTML += '<b>Route Segment: ' + routeSegment +
          '</b><br>';
        summaryPanel.innerHTML += route.legs[i].start_address + ' to ';
        summaryPanel.innerHTML += route.legs[i].end_address + '<br>';
        summaryPanel.innerHTML += route.legs[i].distance.text + '<br><br>';
      }
    } else {
      window.alert('Directions request failed due to ' + status);
    }
  });
}

google.maps.event.addDomListener(window, 'load', initMap);

#right-panel {
  font-family: 'Roboto', 'sans-serif';
  line-height: 30px;
  padding-left: 10px;
}
#right-panel select,
#right-panel input {
  font-size: 15px;
}
#right-panel select {
  width: 100%;
}
#right-panel i {
  font-size: 12px;
}
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#map {
  height: 100%;
  float: left;
  width: 70%;
  height: 100%;
}
#right-panel {
  margin: 20px;
  border-width: 2px;
  width: 20%;
  float: left;
  text-align: left;
  padding-top: 20px;
}
#directions-panel {
  margin-top: 20px;
  background-color: #FFEE77;
  padding: 10px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map"></div>
<div id="right-panel">
  <div>
    <b>Start:</b>
    <select id="start">
      <option value="Halifax, NS">Halifax, NS</option>
      <option value="Boston, MA">Boston, MA</option>
      <option value="New York, NY">New York, NY</option>
      <option value="Miami, FL">Miami, FL</option>
    </select>
    <br>
    <b>Waypoints:</b>
    <br>
    <i>(Ctrl-Click for multiple selection)</i>
    <br>
    <select multiple id="waypoints">
      <option value="montreal, quebec">Montreal, QBC</option>
      <option value="toronto, ont">Toronto, ONT</option>
      <option value="chicago, il">Chicago</option>
      <option value="winnipeg, mb">Winnipeg</option>
      <option value="fargo, nd">Fargo</option>
      <option value="calgary, ab">Calgary</option>
      <option value="spokane, wa">Spokane</option>
    </select>
    <br>
    <b>End:</b>
    <select id="end">
      <option value="Vancouver, BC">Vancouver, BC</option>
      <option value="Seattle, WA">Seattle, WA</option>
      <option value="San Francisco, CA">San Francisco, CA</option>
      <option value="Los Angeles, CA">Los Angeles, CA</option>
    </select>
    <br>
    <input type="submit" id="submit">
  </div>
  <div id="directions-panel"></div>
</div>

Google Map not displaying in JS Fiddle (RefererNotAllowedMapError)

1 Answers1