Карты Google не отображаются во вложенном div
Я пытаюсь вставить карту Google во вложенный div. Я скопировал общий код из примера, который нашел в Интернете, чтобы убедиться, что я могу заставить его работать. Я вставил этот код в основной элемент своего index.html, и он работал нормально. Затем я вставил тот же код в свой app.component.html, и карта не отображается. Я убедился, что используете высоту и ширину в пикселях, поэтому он не будет использовать какой-либо относительный размер для div контейнера карты. кроме того, когда я проверяю элемент, содержащий карту, он выделяет большой пустой квадрат на экране, где карта должна иметь тот же размер, который я указал. Я также заметил, что, глядя на элемент карты в инструментах разработчика, он не сгенерировал никаких дополнительных вложенных div, как это делает известный хороший div карты.
фрагмент кода, который я использую:
<div style = "height:100%; width: 100%">
<h1>My First Google Map</h1>
<div id = "googleMap2" style = "height:400px; width: 400px">insert map</div>
<script>
function initMap() {
var mapProp2= {
center:new google.maps.LatLng(-33.8478796,150.791894), zoom:17,
};
var map=new google.maps.Map(document.getElementById("googleMap2"),mapProp2);
}
</script>
<script src = "https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>
</div>
Обновлено: я использую ключ api, я вставил API_KEY только в качестве заполнителя.
это изображение показывает, как это выглядит в моем браузере
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Вам необходимо зарегистрировать и определить свой ключ API для используемого домена, поэтому:
https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap
Должно выглядеть примерно так:
https://maps.googleapis.com/maps/api/js?key=AzOaSyAI_FJ4STEHLG2SlqU8QCilw_Y9_11W8qc&callback=initMap
Важно отметить, что Google JS API больше не является бесплатным; поэтому, если вам не нужно настраивать свою карту с помощью нескольких маркеров и т. д., лучше использовать функцию встраивания iframe, доступную при использовании функции совместного использования карты в картах Google.
Я использую один, я просто использовал этот текст как заполнитель. Я могу отобразить карту, когда помещаю этот фрагмент в index.html. но когда он помещается в app.component.html, он не показывает
Если вы получаете следующую ОШИБКУ: InvalidKeyMapError, вам нужно получить ключ Api, если он уже был, тогда
Включите Api, сделайте это
- Перейти в API Manager
- Нажмите на Обзор
- Найдите Google Maps JavaScript API (в Google Maps APIs). Нажмите на это
- Там вы найдете кнопку «Включить». Нажмите, чтобы включить API.
Надеюсь, это решит проблему включения API.
У меня есть ключ API, и он работает. карта также появляется, если я помещаю код в index.html, но не в свой app.component.html
Добавьте это в свой index.html внутри своего приложения
<script src = "https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
и внутри app.component.html
import { Component, OnInit } from '@angular/core';
declare var google:any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
ngOnInit(){
this.getMap();
}
getMap() {
let mapProp = {
center: new google.maps.LatLng(23.4866, 80.1066),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
draggable: false
};
new google.maps.Map(document.getElementById('gmap'), mapProp);
}
}
Боже, спасибо тебе большое. проблема заключалась в том, что я использовал getMap() в качестве сценария в html вместо того, чтобы вызывать его в компоненте приложения при его инициализации. похоже, теперь он работает нормально! Я пытался проголосовать, но моя репутация слишком низкая. извиняюсь
Предоставьте Минимальный, полный и проверяемый пример, позволяющий воспроизвести проблему. Код, который вы разместили выше, работает нормально. Также, если вы получаете ошибки / предупреждения в консоли javascript, отредактируйте свой вопрос и включите их. И, может быть, взгляните на ГОСА.