Карты Google не отображаются во вложенном div - PullRequest
Новая
       9

Карты Google не отображаются во вложенном div

0 голосов
/ 30 октября 2018

Я пытаюсь вставить карту Google во вложенный div. Я скопировал некоторый общий код из примера, который я нашел в Интернете, чтобы подтвердить, что я могу заставить его работать. Я вставил этот код в элемент body моего index.html, и он работал нормально. Затем я вставил тот же код в мой app.component.html, и карта не отображается. я позаботился о том, чтобы использовать высоту и ширину в пикселях, чтобы он не использовал относительный размер для контейнера контейнера карты. Кроме того, когда я проверяю элемент, который содержит карту, он выделяет большой пустой квадрат на экране, где карта должна быть с тем же размером, который я указал. я также заметил, что, глядя на элемент карты в инструментах разработчика, он не генерирует никаких дополнительных вложенных элементов 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 в качестве заполнителя.

это изображение показывает, как оно выглядит в моем браузере a

Ответы [ 3 ]

0 голосов
/ 30 октября 2018

Если вы получаете следующую ОШИБКУ: InvalidKeyMapError, тогда вам нужно получить ключ Api, если он уже был, тогда

Включить Api для этого

  1. Перейти к API Manager
  2. Нажмите на обзор
  3. Поиск Google Maps JavaScript API (в разделе Google Maps API). Нажмите на это
  4. Там вы найдете кнопку включения. Нажмите, чтобы включить API.

Надеюсь, что это решит проблему включения API

0 голосов
/ 31 октября 2018

Добавьте это в ваш 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);

}
}
0 голосов
/ 30 октября 2018

Вам необходимо зарегистрироваться и определить свой ключ 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.

...