Menu
I am using this code from Google Map API's and it is not working
<!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>
458
You can do that by accessing Application restrictions, then navigate to “HTTP referrers” then type in your domain's name. After making the necessary changes, click Save. Copy the API key because you will need it to get the map back on your website.
Clear the app's cache & data On your Android phone or tablet, open the Settings app . Tap Apps & notifications. Follow the steps on your device to find the Maps app. After you select the app, storage & cache options should be available.
Deleting the existing key and regenerating a new key worked for me. Show activity on this post. InvalidKeyMapError happens when your API key can't be found. So make sure you are using correct key that you generate or regenerate it.
Google recently changed the terms of use of its Google Maps APIs; if you were already using them on a website (different from localhost) prior to June 22nd, 2016, nothing will change for you; otherwise, you will get the aforementioned issue and need an API key in order to fix your error. The free API key is valid up to 25,000 map loads per day.
In this article you will find everything you may need to know regarding the topic, including a tutorial to fix your error:
Google Maps API error: MissingKeyMapError [SOLVED]
Also, remember to replace YOUR_API_KEY with your actual API key!
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
