[Solved] Google Maps API Error: RefererNotAllowedMapError

Last Reply one month ago By nedash

Posted one month ago

hi I used google map in my page but when I run page it shows Maps for 1 second and after that shows below error

Oops! Something went wrong.
This page didn't load Google Maps correctly. See the JavaScript console for technical details.
 
so I go to https://console.cloud.google.com/ and create new APi key and replace it but again it doesnt show Map below are y codes:
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBmsXMgphSbo9RUEQ6TS0P-hJUYyExcibI"></script>
<script type="text/javascript">
    function initialize() {
        var myLatlng = new google.maps.LatLng(35.692159, 51.258344);

        var mapOptions = {
            zoom: 15,
            center: myLatlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles: [{ "featureType": "all", "elementType": "labels", "stylers": [{ "visibility": "on"}] }, { "featureType": "all", "elementType": "labels.text.fill", "stylers": [{ "saturation": 36 }, { "color": "#000000" }, { "lightness": 40}] }, { "featureType": "all", "elementType": "labels.text.stroke", "stylers": [{ "visibility": "on" }, { "color": "#000000" }, { "lightness": 16}] }, { "featureType": "all", "elementType": "labels.icon", "stylers": [{ "visibility": "off"}] }, { "featureType": "administrative", "elementType": "geometry.fill", "stylers": [{ "color": "#000000" }, { "lightness": 20}] }, { "featureType": "administrative", "elementType": "geometry.stroke", "stylers": [{ "color": "#000000" }, { "lightness": 17 }, { "weight": 1.2}] }, { "featureType": "administrative.country", "elementType": "labels.text.fill", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "administrative.locality", "elementType": "labels.text.fill", "stylers": [{ "color": "#c4c4c4"}] }, { "featureType": "administrative.neighborhood", "elementType": "labels.text.fill", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "landscape", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 20}] }, { "featureType": "poi", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 21 }, { "visibility": "on"}] }, { "featureType": "poi.business", "elementType": "geometry", "stylers": [{ "visibility": "on"}] }, { "featureType": "road.highway", "elementType": "geometry.fill", "stylers": [{ "color": "#e5c163" }, { "lightness": "0"}] }, { "featureType": "road.highway", "elementType": "geometry.stroke", "stylers": [{ "visibility": "off"}] }, { "featureType": "road.highway", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff"}] }, { "featureType": "road.highway", "elementType": "labels.text.stroke", "stylers": [{ "color": "#e5c163"}] }, { "featureType": "road.arterial", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 18}] }, { "featureType": "road.arterial", "elementType": "geometry.fill", "stylers": [{ "color": "#575757"}] }, { "featureType": "road.arterial", "elementType": "labels.text.fill", "stylers": [{ "color": "#ffffff"}] }, { "featureType": "road.arterial", "elementType": "labels.text.stroke", "stylers": [{ "color": "#2c2c2c"}] }, { "featureType": "road.local", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 16}] }, { "featureType": "road.local", "elementType": "labels.text.fill", "stylers": [{ "color": "#999999"}] }, { "featureType": "transit", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 19}] }, { "featureType": "water", "elementType": "geometry", "stylers": [{ "color": "#000000" }, { "lightness": 17}]}]
        };
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var contentString = '<div style="direction: rtl; text-align: right;font-family: behtop_Yekan; float:right;margin:1px 12px 0 0; width:100px;">' +
                                    '<h4>مشاور املاک عبدی</h4>' +
                                        '</div>';

        var infowindow = new google.maps.InfoWindow({
            content: contentString
        });

        var marker = new google.maps.Marker({
            position: myLatlng,
            map: map,
            title: 'تهرانسر'
        });

        infowindow.open(map, marker);
        google.maps.event.addListener(marker, 'mouseover', function () {
            infowindow.open(map, marker);
        });
    }
</script>

what should I do

Best regards

Neda

Posted one month ago Modified on one month ago

To resolve this issue, please can you follow the steps outlined below:

1. First, log in to the Google API Manager – https://console.developers.google.com/apis/api/

2. Then please click on Credentials in the left hand column. This is where the referrers are set.

3. Then click the Pencil icon to the right of the API key for your Google Maps project.

4. Click the Restrict key button on the API key.

5. Scroll down to the Key restriction heading and select HTTP referrers (web sites). Add the following referrers to the text boxes below Accept requests from these HTTP referrers (web sites).

6. Now, scroll down and click the Save button to save your changes.

The changes might take up to 5 minutes to take effect. After that, please test the map again and let me know if it helped.

Refer this links also.

https://stackoverflow.com/questions/35288250/google-maps-javascript-api-referernotallowedmaperror

https://developers.google.com/maps/documentation/javascript/error-messages


Posted one month ago

Hi nedash,

Try to add the actual protocol to the ur. If its http then add http and if https the add https.

Ex:

http://Mywebsite.ir/ if http

https://Mywebsite.ir/ if https

Google have updated the placeholder to include http.


Posted one month ago

hi dharmendr

I found problem

problem was in my domain name  google banned this service for .ir domains I tried it for .COM domains it worked correctly

thanks for your help

Best Regards

Neda