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

Question

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

You need to provide a minimal reproducible example. Not (only) images. Please read on How to Ask. — MrUpsidown
– MrUpsidown, Commented Jun 7, 2020 at 8:54

Icevarta · Accepted Answer · 2020-08-21 13:00:09Z

2

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

answered Aug 21, 2020 at 13:00

Icevarta

1902 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related