谷歌地图没有显示在嵌套的div

Question

I am trying to insert a google map into a nested div. I copied some generic code from an example i found online to confirm that i could get it to work. I pasted that code within the body element of my index.html and it worked fine. i then pasted the same code into my app.component.html and the map doesnt show. i made sure to use the height and width size in pixels so it wouldnt use any relative sizing for the map container div. further, when i inspect the element that contains the map, it highlights a large empty square on the screen where the map should be with the same size dimension that i specified. i also noticed when looking at the map element in the dev tools, it has not generated any of the extra nested divs like the known good map div does.

code snippet i am using:

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

EDIT: i am using an api key, i only inserted API_KEY as a place holder.

this image shows what it looks like in my browser

Answer 1

Add this to your index.html inside your Application <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"> </script> and inside 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);

}
}

Answer 2

You need to register and define your API key for the domain you are using, so:

https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap

Should look something like:

https://maps.googleapis.com/maps/api/js?key=AzOaSyAI_FJ4STEHLG2SlqU8QCilw_Y9_11W8qc&callback=initMap

It is important to note that the Google JS API is no longer free; so, unless you need to customise your map with multiple markers, etc, that it is better to use the iframe embed feature available when you use the share a map feature in google maps.

Answer 3

If you are getting the following ERROR: InvalidKeyMapError then you need get a Api key if already had one then

Enable Api do this

1. Go to API Manager
2. Click on Overview
3. Search for Google Maps JavaScript API(Under Google Maps APIs). Click on that
4. You will find Enable button there. Click to enable API.

Hope this will solve the problem of enabling API