Google Maps in Angular doesn't display map when using Options

user_13694504 0
Viewed 151

I am trying to set up a google maps instance in my Angular aplication using @angular/google-maps, and at the begining everything was really straightforward; I installed and created the element using this tutorial: https://timdeschryver.dev/blog/google-maps-as-an-angular-component

The issue is, when I put the options input variable the map stops displaying, and there is no message in the console.

This is the code without the options:

<google-map
        [width]="'100%'"
        [height]="'100%'"
        [center]="center"
        [options]="mapOptions"
></google-map>

And in this case, this is what is displayed:

This is the working example with no options

<google-map
        [width]="'100%'"
        [height]="'100%'"
        [center]="center"
></google-map>

Using the following options:

import MapOptions = google.maps.MapOptions;
mapOptions: MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8
};

And here is what is shown when I put the options:

This is the example that has the option and somehow doesn't work

I have looked everywhere and can't seem to find any solution to this; aparently I have it configured as specified in the documentation, but it just doesn't work. I also tried using less or no options but it doesn't work either. Since there is no output in the console, I just can't figure out the issue...

angular google-maps
1 Answers

I encountered the same problem.

I don't actually know why, but setting a zoom level within the options fixed the bug for me:

mapOptions: MapOptions = {
    mapTypeId: 'hybrid',
    zoomControl: false,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 20,
    minZoom: 8,
    zoom: 19
};
user_60133530
Related