Angular-google-maps: Angular Google Maps zoom dynamically

[alexzatarain]

hello i have Angular Google Maps on my app (angular 2) , im trying to set the zoom dynamically depending on some city or country , there is a way to do this? example :
i do a search and type new york , i want the zoom fit on the city , if a search for london the zoom must change to fit london

[vvasiloud]

I am not sure if this is implemented but your need something like this
https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
https://developers.google.com/maps/documentation/javascript/examples/places-searchbox

If this is not supported yet you may have to inject '&libraries=places' in LazyMapsAPILoader and crate a searchbox the example.
Once you get a location from autocomplete you could center to that location with this example:

`

      @ViewChild(AgmMap) mapElement: AgmMap;

      this.mapElement._mapsWrapper.setCenter(placeLatLng)

      this.mapElement._mapsWrapper.panTo(placeLatLng);

`
This is not a complete answer or solution by rather a starting point for your needs.

[jplew]

@vvasiloud when I attempt your solution, I get an error:

 Property '_mapsWrapper' is private and only accessible within class 'AgmMap'.

The only public method in the whole directive appears to be triggerResize(). How should we get around this?

[vvasiloud]

@jplew As a workaround you can set mapElement to any instead of AgmMap to avoid the error. I haven't found any other way for this problem yet.

[jplew]

wow, that works! Thanks a lot for the quick response.

I found another solution here on Stack Overflow: https://stackoverflow.com/questions/44315771/setcenter-not-working-in-angular2-google-maps/44333134#44333134

Basically, if you want to access the private GoogleMapsAPIWrapper service, you have to do it via a child component. This is by design, apparently: https://github.com/SebastianM/angular-google-maps/issues/1036#issuecomment-309282967

Wish this was better documented.

[matiishyn]

is there any better solution for this?

[thought2tech]

Have u tried https://angular-maps.com?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.