0

Im trying to create an application using the Google maps api. While running on my localhost the following code, it displays me in the console the following message:

"Google Maps API error: RefererNotAllowedMapError https://developers.google.com/maps/documentation/javascript/error-messages#referer-not-allowed-map-error
Your site URL to be authorized: http://localhost:8888/fintechjobs.ie/fintechmap.php"

<!DOCTYPE html>
<html>

<body>

<div id="map" style="width:100%;height:500px"></div>

<script>
function myMap() {
  var myCenter = new google.maps.LatLng(51.508742,-0.120850);
  var mapCanvas = document.getElementById("map");
  var mapOptions = {center: myCenter, zoom: 5};
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var marker = new google.maps.Marker({position:myCenter});
  marker.setMap(map);
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?key=xxxxxxxxxxxxxxxx&callback=myMap"></script>


</body>
</html>

Can someone guide on where is this error coming from? Thank you!

Luiz Wynne
  • 460
  • 3
  • 10
  • 28

1 Answers1

3

You must allow urls in your Api google map interface : https://console.cloud.google.com/apis/dashboard

Click on the hamburger left then choose "Api and services".

Then click on "credentials" section on the left panel then click on your Google Map Api Key. You can then enter your url (localhost) under the keys api section. Do not forget to enter the port.

H. Nicolas
  • 46
  • 3