Btukfyl

I have seen most of the posts about google map, but no one have answered my question considering new google Api changes in 2018.

I have this code in my page:

<div id="map"></div>

<script>

    function initMap() {

        var myLatLng = { lat: 35.799064, lng: 51.441882 };

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

            center: myLatLng,

            zoom: 16

        });

        var marker = new google.maps.Marker({

            map: map,

            position: myLatLng,

            title: 'Hello World!'

        });

    }



</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"

    type="text/javascript"></script>

I verified my website with uploading a google file in the root of my website.

I have Created an Api key and got the key from google and pasted it in my page.

I tested my Api key in both: Restricted to my website and no restriction.

But still I have the error:

Oops! Something went wrong

This the address of page: Page With Google Map

If you check the browser console you will see the following error message:

Google Maps JavaScript API error: RefererDeniedMapError

According to the documentation this error means:

Your application was blocked for non-compliance with the Google Maps Platform Terms of Service, following several email notifications. To appeal the block and have your implementation reviewed, please complete this form. You will receive a response via email within a few business days.

source: https://developers.google.com/maps/documentation/javascript/error-messages#referer-denied-map-error

You should reach out to the compliance team via webform in order to unblock your domain.

I hope this helps!