1

Olá

eu resolvi um erro com o google maps mas logo em seguida apareceu este erro aqui:

inserir a descrição da imagem aqui

Alguem me pode dizer como posso resolver este problema e por o mapa normal?

Codigo:

#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>

2 Respostas 2

3

A API do google Maps já não é gratuito conforme disse o @ngueno; entretanto, podes usar a API do Mapbox com leaflte js.

O Leaflet é a principal biblioteca JavaScript de código aberto para mapas interativos compatíveis com dispositivos móveis.

O Mapbox é a plataforma de dados de localização para aplicativos móveis e da web.

A sua integração seria algo assim:

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>

Para usar tiles do Mapbox, você também deve solicitar um token de acesso.

1
  • 1
    Cara que solução boa, migrei da burocracia da API do Google para o MapBox e foi só alegria!! Commented 6/03/2020 às 17:34
3

O Google Maps não é mais gratuito como era a um tempo atrás, eles mudaram a estratégia de utilização em 2018.

Para mais informações sobre precificação e utilização você pode checar este link

Agora os motivos para que a marca apareça são:

  1. Você não enviou a chave de API durante o request
  2. A configuração de faturamento (billing) da API não está habilitada para sua conta
  3. Sua forma de pagamento configurada é inválida (cartão de crédito expirado por exemplo)
  4. Um limite diário de utilização (configurado em sua conta) foi excedido

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .