"For Development purposes only" error with google maps

Asked

Viewed 2,987 times

1

Hello

i solved an error with google maps but soon after this error appeared here:

inserir a descrição da imagem aqui

Can someone tell me how I can solve this problem and put the normal map?

Code:

#map {
    height: 100%;
    width: 100%;
}
<div id="map"></div>
        <script>
                var map;
                function initMap() {
                  map = new google.maps.Map(document.getElementById('map'), {
                    center: {lat: 38.736946, lng: -9.142685},
                    zoom: 7,
});
                }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC6BWOev4iy16PGYkfagX-s07yLGO92hLk&callback=initMap"></script>

javascript api google-maps

2 answers

3

Google Maps is no longer free as it was a while ago, they changed the usage strategy in 2018.

For more information on pricing and usage you can check this link

Now the reasons for the tag to appear are:

  1. You did not submit the API key during the request
  2. API billing (Billing) configuration is not enabled for your account
  3. Your configured payment method is invalid (credit card expired for example)
  4. A daily usage limit (set in your account) has been exceeded

3


The Google Maps API is no longer free as @ngueno said; however, you can use the Mapbox with leaflte js.

The Leaflet is the main open source Javascript library for interactive maps compatible with mobile devices.

The Mapbox is the location data platform for mobile and web applications.

Their integration would be something like this:

window.onload = () => {

  var mymap = L.map('mapid').setView([51.505, -0.09], 13);
  var mapboxToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; // Token do map box

  L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token='+mapboxToken , {
    maxZoom: 18,
    id: 'mapbox.streets'
  }).addTo(mymap);

}
<html>

<head>

  <title>Quick Start - Leaflet</title>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="shortcut icon" type="image/x-icon" href="docs/images/favicon.ico">

  <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="">
  <script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>


</head>

<body>


  <div id="mapid" style="width: 600px; height: 400px; position: relative;"></div>


</body>

</html>

To use Mapbox Tiles, you must also request one access token.

  • 1

    Dude that good solution, I migrated from the bureaucracy of the Google API to Mapbox and it was just joy!!

Browser other questions tagged javascript api google-maps

You are not signed in. Login or sign up in order to post.