Google API Maptiler просто не будет работать

Я просмотрел много сообщений на эту тему, но я просто не могу найти исправления для карты Google, встроенной в мой веб-сайт. Это iframe, который ссылается на отдельно размещенный html-файл, созданный с помощью программы maptiler. Встраивание создает страшную серую коробку "Ой! Что-то пошло не так"... хотя желаемая карта отображается примерно полсекунды. Консоль java жалуется на "отсутствие ключей API"... Я создал все виды ключей API Карт Google Javascript, иногда используя правило http, иногда нет. Ничего не работает

HTML-файл появляется ниже. (Я специально оставил ключ.)

<!DOCTYPE html>
<html>
<head>
<title>3rd</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { overflow: hidden; }
body { overflow: hidden; padding: 0; margin: 0;
width: 100%; height: 100%; font-family: Trebuchet MS, Trebuchet, Arial, sans-serif; }
#map { position: absolute; top: 10px; left: 10px; right: 10px; bottom: 15px; overflow: auto; }
#footer { position: absolute; bottom: 0px; left: 0px; width:100%; height: 12px; overflow: hidden; }
@media screen and (max-width: 600px) {
  #map { top:0px; left:0px; width:100%; height:100%;}
}
body { background: #f4f4f4;}
#header { background: #fff; box-shadow: 0 1px 3px #CCC; border: 1px solid #ccc; }
#header h1 { padding:7px 10px; margin:0; font-size: 28px; }
#map { border: 1px solid #ccc; box-shadow: 0 1px 3px #CCC; background-color: #DEDCD7;}
#footer { text-align:center; font-size:9px; color:#606060; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
#map {
    height:expression(document.body.clientHeight-35); /* 10+10+15=35 */
    width:expression(document.body.clientWidth-20); /* 10+10=20 */
}
</style>
<![endif]-->
<script type="text/javascript" src="https://maps.google.com/maps/api/js?MY_KEY_HERE&ampsensor=true"></script>
<!-- Get your Google Maps API Key: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#introduction-->
<!--<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=MY_Key_HERE"></script>-->
<script type="text/javascript">
var map;
var mapBounds = new google.maps.LatLngBounds(
    new google.maps.LatLng(44.890044, -75.192903),
    new google.maps.LatLng(44.909499, -75.165437));
var mapMinZoom = 13;
var mapMaxZoom = 17;
var maptiler = new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) { 
        var proj = map.getProjection();
        var z2 = Math.pow(2, zoom);
        var tileXSize = 256 / z2;
        var tileYSize = 256 / z2;
        var tileBounds = new google.maps.LatLngBounds(
            proj.fromPointToLatLng(new google.maps.Point(coord.x * tileXSize, (coord.y + 1) * tileYSize)),
            proj.fromPointToLatLng(new google.maps.Point((coord.x + 1) * tileXSize, coord.y * tileYSize))
        );
        var y = coord.y;
        var x = coord.x >= 0 ? coord.x : z2 + coord.x
        if (mapBounds.intersects(tileBounds) && (mapMinZoom <= zoom) && (zoom <= mapMaxZoom))
            return zoom + "/" + x + "/" + y + ".png";
        else
            return "https://www.maptiler.com/img/none.png";
    },
    tileSize: new google.maps.Size(256, 256),
    isPng: true,
    opacity: 1.0
});
function init() {
    var opts = {
        tilt:0,
        streetViewControl: false,
        center: new google.maps.LatLng(44.899771, -75.179170),
        zoom: 13
    };
    map = new google.maps.Map(document.getElementById("map"), opts);
    map.setMapTypeId('satellite');
    map.overlayMapTypes.insertAt(0, maptiler);
}
</script>
</head>
<body onload="init()">
<div id="footer">Generated with <a href="https://www.maptiler.com/">MapTiler</a></div>
<div id="map"></div>
</body>
</html>
Источник

2 ответа

Таким образом, решение состояло в том, чтобы создать еще один проект в Google Cloud Console и еще один ключ API, который я тщательно проверял на своем веб-сайте. Я указал среди прочего версию сайта https://, и это сработало. Я проверял сайт раньше, но, возможно, не версию https://. Это может быть совпадением.

Источник

Последняя версия Google Maps API требует личного API-ключа для каждого опубликованного веб-сайта - это решение принимается командой Google Maps.

Вы должны сгенерировать свой собственный ключ API и использовать его в шаблоне, чтобы ваши карты работали. Дополнительная информация доступна на страницах API Карт Google:

https://developers.google.com/maps/documentation/javascript/adding-a-google-map

Чтобы получить ключ из консоли разработчиков Google, перейдите по этой ссылке:

https://console.developers.google.com/flows/enableapi?apiid=maps_backend,geocoding_backend,directions_backend,distance_matrix_backend,elevation_backend&keyType=CLIENT_SIDE&reusekey=true

Ключ используется при вставке библиотеки JavaScript Карт Google в заголовок страницы HTML в качестве параметра для запроса (замените YOUR_API_KEY на ваш собственный сгенерированный ключ):

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

Начиная с MapTiler 7.0, мы добавили поле для этого ключа в Настройки MapTiler. MapTiler автоматически добавит этот ключ в предварительно созданные шаблоны с помощью API Карт Google, чтобы сэкономить ваше время и усилия.

Этот ответ является перепостом от MapTiler HowTo: http://www.maptiler.com/how-to/google-maps-api/

Источник
Другие вопросы по тегам