Google Maps API: Static Map returns Error and no map is available

Question

I opened an account on Google, and I went to https://console.developers.google.com/cloud-resource-manager to create a Key to use Google Maps static API.

I used that Key, on-site pages as well as on AMP pages but while on AMP it works fine, on the normal HTML Page, Google's API returns an error.

Investigating it with Developer Tool of Chrome, it returns MissingKeyMapError which it has no sense because the same key is running on the AMP version of the site.

I debug the webpage (generated by PHP) and I saw: all Geo-data, are correctly retrieved from Google, by CURL etc ...

Just the Javascript of Google doesn't return the map ...

I attach a screenshot of the error code from JS Console of Chrome:

Here below the variable contanining my Key (written in setup.php file)

$key_gigs = "_____________MYKEY______________";

here CLASS I use for AMP as well as for normal HTML pages:

<?php
class geo {

    public function CoOrdinates($address_) {

    global $key_gigs; // Setup.php
    //echo $address_; echo $key_gigs; exit; // debug purpose
    $curl_ = curl_init();
    $url_map = "https://maps.googleapis.com/maps/api/geocode/json?address=$address_&sensor=false&key=$key_gigs";
    curl_setopt($curl_, CURLOPT_URL, $url_map);
    curl_setopt($curl_, CURLOPT_HEADER, false);
    curl_setopt($curl_, CURLOPT_FOLLOWLOCATION, true);
    curl_setopt($curl_, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl_, CURLOPT_ENCODING, "");
    $curlData = curl_exec($curl_);
    curl_close($curl_);

    $data = json_decode($curlData, true);
    //print_r($data);   exit; // debug purpose
    $ret_ = [
        'city' => $data["results"][0]["address_components"][2]["long_name"],
        'country' => $data["results"][0]["address_components"][5]["long_name"],
        'iso' => strtolower($data["results"][0]["address_components"][5]["short_name"]),

        'lat' => $data["results"][0]["geometry"]["location"]["lat"],
        'lon' => $data["results"][0]["geometry"]["location"]["lng"],

        'time-zone' => $this->TimeZone($data["results"][0]["geometry"]["location"]["lat"],$data["results"][0]["geometry"]["location"]["lng"]),
    ];
    //print_r($ret_); exit; // debug purpose
    return $ret_ ;
    }

    public function TimeZone($lat_,$lon_) {
        //echo $lat_." ".$lon_; exit;

        $query_json = "https://maps.googleapis.com/maps/api/timezone/json?location={$lat_},{$lon_}&timestamp=0&sensor=false";
        $json_timezone = file_get_contents($query_json);
        $data_time_zone = json_decode($json_timezone, true);
        return $time_zone = $data_time_zone["timeZoneId"];
    }
}
?>

Here the interested part of the PHP code that generates the page (it's located into the pre-processor of the page)

$address = add_plus($Address.", ".$Number.",".$Code."+".$City.",".$Country);

// Creates and manages object from Class geo();
$geo = new geo();
$coordinates = $geo->CoOrdinates($address);
$city = $coordinates['city'];
$country = $coordinates['country'];
$iso = $coordinates['iso'];
$lat = $coordinates['lat'];
$lon = $coordinates['lon'];
$time_zone = $coordinates['time-zone'];
// GEO Debug
//echo $city." ".$country." ".$iso." ".$lat." ".$lon." ".$time_zone; exit;

And here the META tag for the Google JS. The following code lines, are located into the page itself:

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

Here the visualization code. Variables like $venue, etc, are generated by the pre-processor of the page, and data, taken from dB

    <!-- Map style="width: 60vw; height: 33.8vw;" -->
    <section>
            <h2 class="h_special"><? echo $Name; ?> - EVENTO</h2>
            <div id="gmap" style=""></div>
            <script type="text/javascript">
        var myLatLng = {lat: <? echo $lat; ?>, lng: <? echo $lon; ?>};
        var myOptions = {
            zoom: <? echo $zoom; ?>,
            center: new google.maps.LatLng(<? echo $lat; ?>, <? echo $lon; ?>),
            // mapTypeId: google.maps.MapTypeId.ROADMAP
            // mapTypeId: google.maps.MapTypeId.SATELLITE
            mapTypeId: google.maps.MapTypeId.HYBRID
            // mapTypeId: google.maps.MapTypeId.TERRAIN
        };
        var map = new google.maps.Map(document.getElementById("gmap"), myOptions);
        var marker = new google.maps.Marker({position: myLatLng, map: map, title: '<? echo $venue; ?>'});
            </script>
    </section>

Answer 1

As the Javascript API error code documentation as well your screenshot shows, MissingKeyMapError occurs because you are missing an API key in your Javascript API load URL and has nothing to do with the Static Maps API :

<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>

You need to add an API key to that URL, as the Getting Started documentation says. You also do not need the sensor parameter :

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