CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
Tobi Ajala
Tobi Ajala

Reputation: 107

Why wont Google Maps API Key recognise my referrer URL?

I have a html file on my website domain (devodeliver.co.uk) which calls on my API Key with the code.

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY-KEY"></script>

In the Developers Console I have tried adding every combination of my domain URL as you can see below

enter image description here

But when I load my site it shows the map for a millisecond then returns with the error "Google Maps API error: InvalidKeyMapError https://developers.google.com/maps/documentation/javascript/error-messages#invalid-key-map-error_.bb @ MY-KEY:32" - basically saying I haven't given my website permission to access that API Key. But even if I don't set any referrers, it come back with the same error message. I've also waited way over 5 minutes for the API to take affect. Please, what am I doing wrong?! I've spent almost 16 hours trying to figure this out & I can't seem to for the life of me. HELPPPP!

Full HTML code:

 <html>
 <head>

    <style type="text/css">
      #map
      {
        height:400px;
        width:400px;
        display:block;
      }
    </style>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB7-LTLEupUWBJBWl1GpOWPwkMvxzf8itQ"></script>

    <script type="text/javascript">

        function getPosition(callback) {
          var geocoder = new google.maps.Geocoder();
          var postcode = document.getElementById("postcode").value;

          geocoder.geocode({'address': postcode}, function(results, status)
          {
            if (status == google.maps.GeocoderStatus.OK)
            {
              callback({
                latt: results[0].geometry.location.lat(),
                long: results[0].geometry.location.lng()
              });
            }
          });
        }

        function setup_map(latitude, longitude) {
          var _position = { lat: latitude, lng: longitude};

          var mapOptions = {
            zoom: 16,
            center: _position
          }

          var map = new google.maps.Map(document.getElementById('map'), mapOptions);

          var marker = new google.maps.Marker({
            position: mapOptions.center,
            map: map
          });
        }

        window.onload = function() {
          setup_map(51.5073509, -0.12775829999998223);

          document.getElementById("form").onsubmit = function() {
            getPosition(function(position){

              var text = document.getElementById("text")
              text.innerHTML = "Marker position: { Longitude: "+position.long+ ",  Latitude:"+position.latt+" }";

              setup_map(position.latt, position.long);
            });
          }
        }
    </script>

 </head>
 <body>
    <form action="javascript:void(0)" id="form">
      <input type="text" id="postcode" placeholder="Enter a postcode">
      <input type="submit" value="Show me"/>
    </form>
    <div id="map"></div>
    <div id="text"></div>
 </body>
 </html>

Upvotes: 1

Views: 3223

Answers (1)

Marcel Kohls
Marcel Kohls

Reputation: 1865

Here, when I tested it, it gives me the error "Google Maps API error: ApiNotActivatedMapError" on the JS console.

Take a look for this issue on: https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes

When you use a library or service via the Maps-Javascript-API, and use a key, you need to activate the Google Maps JavaScript API .

Make sure to activate the Google Maps JavaScript API for your project.

Also,

take a look on this other topic about Enable the Google Maps Jvascript API: Google Map error: InvalidKeyOrUnauthorizedURLMapError

Upvotes: 2

Related Questions