Deze pagina heeft Google Maps niet correct geladen. Zie de JavaScript-console voor technische details

Ik gebruik deze code van Google Map API‘s en het werkt niet

<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #map {
    height: 100%;
  }
  .controls {
    margin-top: 10px;
    border: 1px solid transparent;
    border-radius: 2px 0 0 2px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 32px;
    outline: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  }
  #pac-input {
    background-color: #fff;
    font-family: Roboto;
    font-size: 15px;
    font-weight: 300;
    margin-left: 12px;
    padding: 0 11px 0 13px;
    text-overflow: ellipsis;
    width: 300px;
  }
  #pac-input:focus {
    border-color: #4d90fe;
  }
  .pac-container {
    font-family: Roboto;
  }
  #type-selector {
    color: #fff;
    background-color: #4d90fe;
    padding: 5px 11px 0px 11px;
  }
  #type-selector label {
    font-family: Roboto;
    font-size: 13px;
    font-weight: 300;
  }
</style>
</head>
<body>
<input id="pac-input" class="controls" type="text"
    placeholder="Enter a location">
<div id="type-selector" class="controls">
  <input type="radio" name="type" id="changetype-all" checked="checked">
  <label for="changetype-all">All</label>
  <input type="radio" name="type" id="changetype-establishment">
  <label for="changetype-establishment">Establishments</label>
  <input type="radio" name="type" id="changetype-address">
  <label for="changetype-address">Addresses</label>
  <input type="radio" name="type" id="changetype-geocode">
  <label for="changetype-geocode">Geocodes</label>
 </div>
<div id="map"></div>
<script>
  // This example requires the Places library. Include the libraries=places
  // parameter when you first load the API. For example:                         // <script src="https://maps.googleapis.com/maps/api/js? key=YOUR_API_KEY&libraries=places">
  function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -33.8688, lng: 151.2195},
      zoom: 13
    });
    var input = /** @type {!HTMLInputElement} */(
        document.getElementById('pac-input'));
    var types = document.getElementById('type-selector');
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
    map.controls[google.maps.ControlPosition.TOP_LEFT].push(types);
    var autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindTo('bounds', map);
    var infowindow = new google.maps.InfoWindow();
    var marker = new google.maps.Marker({
      map: map,
      anchorPoint: new google.maps.Point(0, -29)
    });
    autocomplete.addListener('place_changed', function() {
      infowindow.close();
      marker.setVisible(false);
      var place = autocomplete.getPlace();
      if (!place.geometry) {
        window.alert("Autocomplete's returned place contains no geometry");
        return;
      }
      // If the place has a geometry, then present it on a map.
      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);
      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(17);  // Why 17? Because it looks good.
      }
      marker.setIcon(/** @type {google.maps.Icon} */({
        url: place.icon,
        size: new google.maps.Size(71, 71),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(17, 34),
        scaledSize: new google.maps.Size(35, 35)
      }));
      marker.setPosition(place.geometry.location);
      marker.setVisible(true);
      var address = '';
      if (place.address_components) {
        address = [
          (place.address_components[0] && place.address_components[0].short_name || ''),
          (place.address_components[1] && place.address_components[1].short_name || ''),
          (place.address_components[2] && place.address_components[2].short_name || '')
        ].join(' ');
      }
      infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
      infowindow.open(map, marker);
    });
    // Sets a listener on a radio button to change the filter type on Places
    // Autocomplete.
    function setupClickListener(id, types) {
      var radioButton = document.getElementById(id);
      radioButton.addEventListener('click', function() {
        autocomplete.setTypes(types);
      });
    }
    setupClickListener('changetype-all', []);
    setupClickListener('changetype-address', ['address']);
    setupClickListener('changetype-establishment', ['establishment']);
    setupClickListener('changetype-geocode', ['geocode']);
  }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places&callback=initMap"
    async defer></script>


Antwoord 1, autoriteit 100%

De oplossing is heel eenvoudig: vervang gewoon UW_API_KEY op de laatste regel van uw code door uw werkelijke API-sleutel!

Als u er geen heeft, kunt u deze gratis krijgen op de Google Developers-website.


Antwoord 2, autoriteit 97%

Google onlangs gewijzigd de gebruiksvoorwaarden van de Google Maps API’s; als je ze al gebruikte op een website (anders dan localhost) vóór 22 juni 2016, verandert er niets voor jou; anders krijgt u het bovengenoemde probleem en hebt u een API-sleutel nodig om uw fout op te lossen. De gratis API-sleutel is geldig tot 25.000 kaartladingen per dag.

In dit artikel vindt u alles wat u over het onderwerp moet weten, inclusief een zelfstudie om uw fout op te lossen:

Google Maps API-fout: MissingKeyMapError [OPGELOST]

Vergeet ook niet om UW_API_KEY te vervangen door uw werkelijke API-sleutel!


Antwoord 3, autoriteit 40%

U kunt de foutmelding ook krijgen als uw facturering niet correct is ingesteld.

Google deelt tegoed uit ter waarde van $ 300 of 12 maanden gratis gebruik, afhankelijk van wat het snelst op is. Daarna moet u facturering inschakelen.

voer hier de afbeeldingsbeschrijving in


Antwoord 4, autoriteit 27%

Er zijn 2 mogelijkheden voor dit probleem:

  1. je hebt de API KEY voor de kaartbrowser niet ingevoerd
  2. je hebt de API-bibliotheek niet speciaal voor deze Google Maps ingeschakeld
    JavaScript-API

kijk op uw Google-ontwikkelaarsconsole voor die twee items

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes